/*
 * Data Garden Portal — design tokens
 *
 * Generated by hand for Phase 1 v0 from design/tokens/{colors,type}.json.
 * Phase 2+ will build a JSON → CSS generator so this file is derived, not authored.
 *
 * Source of truth: /Users/daniel/dev/datagarden-portal/design/tokens/
 * Brand discipline: see /Users/daniel/dev/datagarden-portal-designer-brief.md
 */

:root {
  /* --- brand: kale ramp --- */
  --color-kale-50:  #F2F5EE;
  --color-kale-100: #E4ECDF;
  --color-kale-200: #C4D6BE;
  --color-kale-300: #95B08C;
  --color-kale-400: #6B8A5F;
  --color-kale-500: #4F6E45;
  --color-kale-600: #3D5C36;
  --color-kale-700: #2F4A2A;
  --color-kale-800: #1A2E1E;
  --color-kale-900: #0F1F14;

  --color-brand-primary:        var(--color-kale-700);
  --color-brand-primary-hover:  var(--color-kale-800);
  --color-brand-primary-active: var(--color-kale-900);
  --color-brand-subtle:         var(--color-kale-50);
  --color-brand-subtle-border:  var(--color-kale-200);
  --color-ornament:             var(--color-kale-500);

  /* --- accent: terra ramp --- */
  --color-terra-50:  #F7EFE6;
  --color-terra-100: #EFDDC8;
  --color-terra-200: #E6CBB6;
  --color-terra-400: #C28358;
  --color-terra-500: #A8623A;
  --color-terra-600: #92522F;
  --color-terra-700: #7A4226;
  --color-terra-900: #3E2418;

  --color-accent:        var(--color-terra-700);
  --color-accent-hover:  var(--color-terra-900);

  /* --- neutrals: warm grays + cream --- */
  --color-cream-50:  #FAF7F1;
  --color-cream-100: #F4EFE5;
  --color-cream-200: #EAE3D3;
  --color-warm-300:  #D8CFBC;
  --color-warm-400:  #B6AC97;
  --color-warm-500:  #897F6B;
  --color-warm-600:  #5F564A;
  --color-warm-700:  #403A30;
  --color-warm-800:  #2A2620;
  --color-warm-900:  #1A1814;

  /* --- surfaces --- */
  --surface-page:    var(--color-cream-50);
  --surface-raised:  #FFFFFF;
  --surface-sunken:  var(--color-cream-100);
  --surface-inset:   var(--color-cream-200);
  --surface-overlay: rgba(26, 24, 20, 0.55);

  /* --- borders --- */
  --border-default: var(--color-cream-200);
  --border-strong:  var(--color-warm-300);
  --border-divider: var(--color-cream-200);
  --border-focus:   var(--color-kale-600);

  /* --- text --- */
  --text-primary:     var(--color-warm-900);
  --text-muted:       var(--color-warm-700);
  --text-placeholder: var(--color-warm-600);
  --text-on-brand:    var(--color-cream-50);
  --text-on-accent:   var(--color-cream-50);
  --text-link:        var(--color-terra-700);
  --text-link-hover:  var(--color-terra-900);

  /* --- semantic --- */
  --color-success:    #3A6E42;
  --color-success-bg: #E2EBE0;
  --color-warning:    #9A6A1F;
  --color-warning-bg: #F4E8CF;
  --color-danger:     #9A3A2E;
  --color-danger-bg:  #F4DCD7;
  --color-info:       #3A5A7A;
  --color-info-bg:    #DCE6EE;

  /* --- data viz: categorical --- */
  --viz-cat-1: #2F4A2A;
  --viz-cat-2: #7A4226;
  --viz-cat-3: #4A5A6B;
  --viz-cat-4: #A6741A;
  --viz-cat-5: #6B4A6B;
  --viz-cat-6: #3F6B3A;
  --viz-cat-7: #9A3B2C;
  --viz-cat-8: #5C5547;

  /* --- data viz: sequential (kale-anchored, magnitude) --- */
  --viz-seq-0: #F2F5EE;
  --viz-seq-1: #E4ECDF;
  --viz-seq-2: #C4D6BE;
  --viz-seq-3: #95B08C;
  --viz-seq-4: #4F6E45;
  --viz-seq-5: #2F4A2A;
  --viz-seq-6: #1A2E1E;
  --viz-seq-7: #0F1F14;

  /* --- data viz: diverging (terra ↔ kale, deltas) --- */
  --viz-div-neg-3: #3E2418;
  --viz-div-neg-2: #7A4226;
  --viz-div-neg-1: #C28358;
  --viz-div-0:     #FAF7F1;
  --viz-div-pos-1: #C4D6BE;
  --viz-div-pos-2: #6B8A5F;
  --viz-div-pos-3: #2F4A2A;

  /* --- type families --- */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- type scale --- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;

  /* --- type weights --- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* --- line heights --- */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* --- letter spacing --- */
  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* --- spacing scale: 8px base, key = multiple of base; key 1 is a half-step for tight rows --- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- radii: structural, not soft. md is working radius; lg reserved for modals --- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   3px;
  --radius-lg:   6px;
  --radius-full: 9999px;

  /* --- border thicknesses --- */
  --border-thin:  1px;
  --border-thick: 2px;

  /* --- shadows: warm-tinted (warm-900 base), shallow, single-layer --- */
  --shadow-color-base: rgba(26, 24, 20, 0.08);
  --shadow-sm: 0 1px 2px rgba(26, 24, 20, 0.06);
  --shadow-md: 0 2px 6px rgba(26, 24, 20, 0.08);
  --shadow-lg: 0 6px 16px rgba(26, 24, 20, 0.10);

  /* --- motion durations --- */
  --duration-instant: 0ms;
  --duration-fast:    120ms;
  --duration-normal:  220ms;
  --duration-slow:    360ms;

  /* --- motion easings --- */
  --ease-standard:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);

  /* --- semantic state hovers (Phase 2.3) --- */
  --color-danger-hover: var(--color-terra-900);

  /* --- chrome dimensions (Phase 2.3) --- */
  --topbar-height:    4rem;     /* 64px — brand + nav + identity chip */

  /* --- modal widths (Phase 2.3) --- */
  --modal-width-sm:   24rem;    /* single-question confirm   */
  --modal-width-md:   32rem;    /* form / destructive confirm */
  --modal-width-lg:   44rem;    /* content review            */

  /* --- layout shell widths (Phase 2.3) --- */
  --shell-max-app:    72rem;    /* dashboard / catalog */
  --shell-max-read:   80rem;    /* long-form publication views */
  --shell-sidebar-w:  16rem;    /* filters / TOC slot */

  /* --- z-index ladder (Phase 2.3) --- */
  --z-overlay:        50;
  --z-modal:          60;
}

/*
 * Reduced-motion stance (Foundation strategy):
 *  1. Token-level: long durations (normal, slow) collapse to fast so unconditional
 *     color/opacity transitions stay perceivable but never linger.
 *  2. Component-level (each component must enforce): exclude transform and
 *     dimension transitions from `transition` lists when reduced-motion is set.
 *     Tokens cannot do this — only the component knows which properties it animates.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-normal: 120ms;
    --duration-slow:   120ms;
  }
}