/* ============================================================
   TEXAS PROGRESS TECH — DESIGN TOKENS
   Single source of truth. Do not hard-code hex values anywhere
   else in the codebase. See design-system/texas-progress-tech/MASTER.md
   ============================================================ */

:root {
  /* --- 1. BRAND PRIMITIVES (client-supplied, immutable) ------ */
  --tpt-blue:   #0A2CCA;  /* 9.43:1 on white  */
  --tpt-grey:   #8D99AE;  /* 2.88:1 on white — STRUCTURE ONLY, never text */
  --tpt-yellow: #F8F32B;  /* 16.71:1 with ink text */
  --tpt-rust:   #72200E;  /* 10.89:1 on white */
  --tpt-ink:    #0F0A0A;  /* 19.66:1 on white */
  --tpt-paper:  #FFFFFF;

  /* --- 2. DERIVED RAMPS (generated, contrast-verified) ------- */
  --blue-50:  #F3F4FC;  --blue-100: #DDE1F8;  --blue-200: #A2AFEB;
  --blue-300: #6076DD;  --blue-500: #0A2CCA;  --blue-700: #0B26A7;
  --blue-800: #0C2089;  --blue-900: #0D1A66;

  --grey-50:  #F9FAFB;  --grey-100: #EFF1F4;  --grey-200: #D4D8E0;
  --grey-300: #B5BDCA;  --grey-500: #8D99AE;  --grey-700: #767F90;
  --grey-800: #626876;  /* 5.58:1 on white — lightest legal body grey */
  --grey-900: #4B4F59;  /* 8.20:1 on white */

  --rust-50:  #F8F4F3;  --rust-100: #EBE0DD;  --rust-200: #C9AAA3;
  --rust-300: #A36E62;  --rust-500: #72200E;  --rust-700: #601C0D;
  --rust-800: #50190D;  --rust-900: #3F150C;

  --yellow-100: #FEFDE1; --yellow-200: #FCFAAE; --yellow-300: #FAF775;
  --yellow-500: #F8F32B; --yellow-700: #CEC925; --yellow-900: #7F7A1A;

  --ink-900: #0F0A0A;  --ink-800: #241D1D;  --ink-700: #3A3232;

  /* --- 3. SEMANTIC TOKENS ------------------------------------ */
  --color-bg:            var(--tpt-paper);
  --color-bg-sunken:     var(--grey-50);
  --color-surface:       var(--tpt-paper);
  --color-surface-alt:   var(--blue-50);
  --color-surface-inverse: var(--ink-900);
  /* The footer is chrome, not content. Giving it a different dark than
     the ink content bands stops a dark section running straight into it
     and reading as one undifferentiated block. */
  --color-footer: var(--blue-900);

  --color-text:          var(--ink-900);          /* 19.66:1 */
  --color-text-muted:    var(--grey-800);         /*  5.58:1 */
  --color-text-inverse:  var(--tpt-paper);
  --color-text-on-yellow: var(--ink-900);         /* 16.71:1 */

  --color-border:        var(--grey-200);
  --color-border-strong: var(--ink-900);
  --color-rule:          var(--grey-300);

  --color-brand:         var(--tpt-blue);
  --color-brand-hover:   var(--blue-700);
  --color-accent:        var(--tpt-yellow);
  --color-accent-hover:  var(--yellow-300);

  --color-focus:         var(--tpt-blue);
  --color-focus-inverse: var(--tpt-yellow);

  --color-error:         #B3160F;                 /* 6.7:1 on white */
  --color-error-bg:      #FDF1F0;
  --color-success:       #0E6B34;                 /* 5.6:1 on white */
  --color-success-bg:    #EFF8F2;

  /* --- 4. WAYFINDING: each branch owns a hue ----------------- */
  --path-campaign:        var(--tpt-blue);
  --path-campaign-soft:   var(--blue-50);
  --path-campaign-edge:   var(--blue-200);
  --path-volunteer:       var(--tpt-rust);
  --path-volunteer-soft:  var(--rust-50);
  --path-volunteer-edge:  var(--rust-200);
  --path-home:            var(--ink-900);

  /* --- 5. TYPOGRAPHY ---------------------------------------- */
  --font-display: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace;

  /* Fluid scale. Body floor is 17px — above the 16px minimum,
     chosen deliberately for a 55+ audience. */
  --fs-label: 0.8125rem;
  --fs-sm:    0.9375rem;
  --fs-base:  clamp(1.0625rem, 0.25vw + 1rem, 1.125rem);
  --fs-lg:    clamp(1.1875rem, 0.5vw + 1.05rem, 1.3125rem);
  --fs-xl:    clamp(1.375rem, 1vw + 1.1rem, 1.625rem);
  --fs-2xl:   clamp(1.75rem, 2vw + 1.2rem, 2.375rem);
  --fs-3xl:   clamp(2.125rem, 3.2vw + 1.1rem, 3.25rem);
  --fs-4xl:   clamp(2.5rem, 5.5vw + 1rem, 4.25rem);

  --lh-tight: 1.1;
  --lh-snug:  1.28;
  --lh-body:  1.6;
  --lh-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-caps: 0.1em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --measure: 66ch;        /* body copy max width */
  --measure-tight: 46ch;  /* lede / display */

  /* --- 6. SPACE (4pt rhythm, density 4/10) ------------------ */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;    --space-9: 6rem;
  --space-10: 8rem;

  --section-y: clamp(3rem, 7vw, 6rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --container: 72rem;
  --container-narrow: 46rem;

  /* --- 7. SHAPE + ELEVATION -------------------------------- */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --radius-xl: 22px; --radius-pill: 999px;

  --border-hair: 1px; --border-base: 2px; --border-heavy: 3px;

  --elev-0: none;
  --elev-1: 0 1px 2px rgba(15,10,10,.06), 0 2px 6px rgba(15,10,10,.05);
  --elev-2: 0 2px 4px rgba(15,10,10,.06), 0 8px 20px rgba(15,10,10,.08);
  --elev-3: 0 4px 8px rgba(15,10,10,.07), 0 20px 44px rgba(15,10,10,.12);
  --elev-focus: 0 0 0 3px var(--color-bg), 0 0 0 6px var(--color-focus);

  /* --- 8. MOTION ------------------------------------------- */
  --dur-micro: 120ms;   /* press / tap feedback  */
  --dur-state: 220ms;   /* hover, colour, small state change */
  --dur-move:  380ms;   /* adjacent panel travel */
  --dur-far:   560ms;   /* 2+ panel travel */
  --dur-reveal: 500ms;  /* scroll reveal */

  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);

  --stagger-step: 60ms;

  /* --- 9. LAYERS ------------------------------------------- */
  --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-header: 40;
  --z-overlay: 100; --z-modal: 200; --z-toast: 400; --z-skip: 1000;

  /* --- 10. SIZING ------------------------------------------ */
  --touch-min: 44px;
  --header-h: 4.5rem;
  --rail-h: 3.25rem;
}

/* Density override for data-dense future views (e.g. resources library) */
[data-density="compact"] {
  --section-y: clamp(2rem, 4vw, 3.5rem);
  --space-7: 2rem; --space-8: 3rem; --space-9: 4rem;
}