/*
 * tokens.primitives.css
 *
 * Raw brand DNA. These are the source values — never consumed directly by
 * components. All component styling goes through tokens.semantic.css.
 *
 * To use a primitive: reference it in tokens.semantic.css as a semantic token,
 * then consume the semantic token in templates.
 */

:root {

  /* ── Palette ──────────────────────────────────────────────────────────── */

  /* Brand */
  --green-brand:   #1f4f3a;   /* primary brand green; client-overridable via --brand-primary */
  --purple-brand:  #8b5cf6;   /* secondary accent purple; client-overridable via --brand-secondary */
  --purple-light:  #a78bfa;
  --purple-subtle: #d8d5f2;
  --black-shell:   #0b0b0c;   /* nav / header / footer background */

  /* Slate neutrals */
  --slate-950: #0f172a;       /* primary text, dark buttons */
  --slate-900: #1e293b;       /* body text */
  --slate-800: #334155;       /* secondary text */
  --slate-700: #475569;       /* muted text */
  --slate-600: #64748b;       /* labels, captions */
  --slate-400: #94a3b8;       /* faint labels */
  --slate-300: #cbd5e1;       /* form borders */
  --slate-200: #e2e8f0;       /* card/section borders (all surfaces) */
  --slate-100: #f1f5f9;       /* light backgrounds */
  --slate-50:  #f8fafc;       /* page background */
  --white:     #ffffff;

  /* Navy display — report surface only; rich warm-black for large headings */
  --navy-display: #172033;

  /* Blue — action / interactive */
  --blue-700:  #1d4ed8;       /* hover state */
  --blue-600:  #2563eb;       /* primary action */
  --blue-400:  #60a5fa;       /* chart fills, light accents */
  --blue-200:  #bfdbfe;       /* range highlights */
  --blue-100:  #dbeafe;       /* info backgrounds */
  --blue-50:   #eff6ff;
  --blue-tint: #f8fbff;       /* near-white blue; report surface micro-backgrounds */
  --blue-border: #dbe4ef;     /* report surface card borders; blue-tinted */

  /* Red — error / destructive */
  --red-800:   #991b1b;
  --red-700:   #b91c1c;
  --red-600:   #dc2626;
  --red-200:   #fecaca;
  --red-100:   #fee2e2;

  /* Green — success */
  --green-700: #15803d;
  --green-600: #16a34a;
  --green-100: #dcfce7;

  /* Amber — warning */
  --amber-700: #92400e;
  --amber-600: #d97706;
  --amber-500: #f59e0b;
  --amber-200: #fde68a;
  --amber-100: #fef3c7;

  /* Orange — secondary metric / chart accent */
  --orange-500: #f97316;
  --orange-100: #fed7aa;

  /* Teal — tertiary metric / chart accent */
  --teal-700:  #0f766e;
  --teal-500:  #14b8a6;
  --teal-100:  #99f6e4;


  /* ── Typography ───────────────────────────────────────────────────────── */

  --font-sans:    system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                  "Liberation Mono", "Courier New", monospace;
  --font-data:    "Instrument Sans", "Inter", system-ui, sans-serif; /* Tabulator tables */

  /* Size scale */
  --text-2xs:     10px;
  --text-xs:      11px;
  --text-sm:      12px;
  --text-base:    13px;
  --text-md:      14px;
  --text-lg:      15px;   /* inputs */
  --text-xl:      16px;
  --text-2xl:     18px;
  --text-3xl:     20px;
  --text-4xl:     22px;
  --text-5xl:     24px;
  --text-6xl:     28px;
  --text-7xl:     30px;
  --text-8xl:     40px;
  --text-display: clamp(28px, 3vw, 48px);  /* report page hero headings */

  /* Weight scale */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Letter spacing */
  --tracking-tight:   -0.03em;   /* page headings */
  --tracking-tighter: -0.04em;   /* display / hero text */
  --tracking-snug:    -0.02em;
  --tracking-wide:     0.08em;   /* uppercase labels */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.65;


  /* ── Spacing ──────────────────────────────────────────────────────────── */

  /* 4-point base grid */
  --space-1:   4px;
  --space-2:   6px;
  --space-3:   8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  14px;
  --space-7:  16px;
  --space-8:  18px;
  --space-9:  20px;
  --space-10: 24px;
  --space-12: 32px;
  --space-16: 40px;


  /* ── Border radius ────────────────────────────────────────────────────── */

  --radius-sm:          6px;    /* small badges, icons */
  --radius-control:    10px;    /* buttons, inputs, selects — all surfaces */
  --radius-card:       14px;    /* standard cards — admin surfaces */
  --radius-card-report: 20px;   /* report surface shells, insight cards, header */
  --radius-pill:      999px;    /* pills, fully-rounded badges */


  /* ── Shadows ──────────────────────────────────────────────────────────── */

  --shadow-xs:         0  8px 18px rgba(15, 23, 42, 0.04);
  --shadow-sm:         0 14px 32px rgba(15, 23, 42, 0.04);
  --shadow-md:         0 18px 44px rgba(15, 23, 42, 0.06);
  --shadow-lg:         0 24px 60px rgba(15, 23, 42, 0.18);
  --shadow-inset-top:  inset 0 1px 0 rgba(255, 255, 255, 0.92);


  /* ── Motion ───────────────────────────────────────────────────────────── */

  --duration-fast: 0.14s;
  --duration-base: 0.18s;
  --easing-base:   ease;
  --easing-smooth: ease-in-out;

  --transition-interactive: var(--duration-fast) var(--easing-base);
  --transition-base:        var(--duration-base) var(--easing-base);


  /* ── Z-index layers ───────────────────────────────────────────────────── */

  --z-dropdown:   1200;
  --z-datepicker: 1300;
  --z-modal:      1400;
  --z-overlay:   10000;


  /* ── Breakpoints (use in @media queries — not consumed as variables) ──── */
  /*
   * --bp-sm:        520px
   * --bp-md:        720px
   * --bp-lg:        960px
   * --bp-xl:       1080px
   * --bp-container: 1200px  (max-width of main content area)
   */

}