/* ============================================================
   DESIGN TOKENS — wanderingwithpride.org
   Meridian v5 palette · DM Serif Display / Space Grotesk / Inter
   Unified with v4-tokens.css — single source of truth
   Last updated: 2026-03-28
   ============================================================ */

@layer tokens {
  :root {

    /* ----------------------------------------------------------
       PALETTE — Meridian v5
       All hex values are canonical. Do not adjust without
       updating DESIGN-BRIEF.md and re-running contrast checks.
    ---------------------------------------------------------- */

    /* Core darks */
    --void:        #08090D;   /* Near-black: hero, footer, dark sections */
    --slate:       #1C2340;   /* Mid-dark section backgrounds */
    --slate-mid:   #2A3356;   /* Card backgrounds on dark sections */

    /* Light backgrounds */
    --parchment:      #F9F5EE;   /* Warm off-white page background */
    --parchment-warm: #EDE8DE;   /* Warm parchment — forms, cards */
    --smoke:          #F2F1F8;   /* Alternate light section background */
    --cloud:          #FFFFFF;   /* Card surfaces, text on dark */

    /* Text */
    --text-primary:   #0D0F1A;   /* Body text */
    --text-secondary: #5A5F7A;   /* Supporting text */
    --text-muted:     #686C88;   /* Muted / captions */
    --text-inverse:   #FFFFFF;   /* Text on dark backgrounds */

    /* Brand accents */
    --meridian:       #1B4FE8;   /* Primary CTA — cobalt blue */
    --meridian-dark:  #1340C0;   /* Hover/pressed state */
    --ember:          #E8440E;   /* Apply button — distinct orange-red */
    --ember-dark:     #C93B0C;   /* Hover state */
    --signal:         #F5E642;   /* Data emphasis / stat callouts. WARNING: 1.19:1 on parchment — NEVER as text on light bg.
                                    Use only on void/slate (15+:1, AAA) or as button bg with dark text inside (14.8:1, AAA). */

    /* Functional */
    --focus-ring:  #1B4FE8;
    --error:       #C0392B;
    --border:      #E2E1EC;        /* Decorative dividers only — 1.19:1 on parchment, fails interactive 3:1 */
    --border-input: #787C95;        /* Form inputs / interactive UI — 3.78:1 on parchment, WCAG non-text ✓ */
    --border-dark: rgba(255,255,255,0.12);

    /* Pride stripe — single 6px at top of every page */
    --pride-stripe: linear-gradient(
      90deg,
      #E40303  0%,
      #FF8C00 17%,
      #FFED00 33%,
      #008026 50%,
      #004DFF 67%,
      #750787 83%,
      #750787 100%
    );

    /* Legacy compat aliases */
    --color-navy:       var(--void);
    --color-ink:        var(--text-primary);
    --color-cream:      var(--parchment);
    --color-volt:       var(--signal);
    --color-volt-dark:  #C8C020;
    --color-fire:       var(--ember);
    --color-fire-dark:  var(--ember-dark);
    --color-pride-gold: var(--signal);


    /* ----------------------------------------------------------
       TYPOGRAPHY
    ---------------------------------------------------------- */

    --font-display: 'DM Serif Display', Georgia, serif;
    --font-ui:      'Space Grotesk', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;


    /* ----------------------------------------------------------
       FLUID TYPE SCALE
    ---------------------------------------------------------- */

    --text-xs:   clamp(0.6875rem, 1.1vw,  0.75rem);
    --text-sm:   clamp(0.8125rem, 1.3vw,  0.875rem);
    --text-base: clamp(0.9375rem, 1.5vw,  1rem);
    --text-md:   clamp(1rem,      1.7vw,  1.125rem);
    --text-lg:   clamp(1.125rem,  2vw,    1.375rem);
    --text-xl:   clamp(1.375rem,  2.4vw,  1.75rem);
    --text-2xl:  clamp(1.75rem,   3.2vw,  2.25rem);
    --text-3xl:  clamp(2.25rem,   4.2vw,  3rem);
    --text-4xl:  clamp(2.75rem,   5.5vw,  4rem);
    --text-5xl:  clamp(3.5rem,    7.5vw,  5.5rem);
    --text-6xl:  clamp(4rem,      9vw,    7rem);


    /* ----------------------------------------------------------
       SPACING SCALE
    ---------------------------------------------------------- */

    --space-xs:      0.25rem;
    --space-sm:      0.5rem;
    --space-md:      1rem;
    --space-lg:      1.5rem;
    --space-xl:      2rem;
    --space-2xl:     3rem;
    --space-3xl:     4rem;
    --space-4xl:     6rem;
    --space-section: clamp(5rem, 10vw, 9rem);

    /* Numeric aliases (legacy) */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
    --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
    --space-7: 48px;  --space-8: 64px;  --space-9: 80px;


    /* ----------------------------------------------------------
       LAYOUT
    ---------------------------------------------------------- */

    --container-max:    1200px;
    --container-narrow: 760px;
    --header-h:         68px;


    /* ----------------------------------------------------------
       BORDER RADIUS — 4px max per brand brief
    ---------------------------------------------------------- */

    --radius-none: 0px;
    --radius-sm:   4px;
    --radius-md:   4px;   /* MAX — never exceed */
    --radius-lg:   4px;   /* Clamped to brand max */
    --radius-pill:  999px;  /* Only for tags/badges */


    /* ----------------------------------------------------------
       SHADOWS
    ---------------------------------------------------------- */

    --shadow-sm:  0 1px 3px rgba(8,9,13,0.08);
    --shadow-md:  0 4px 16px rgba(8,9,13,0.10);
    --shadow-lg:  0 8px 32px rgba(8,9,13,0.14);


    /* ----------------------------------------------------------
       MOTION
    ---------------------------------------------------------- */

    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast:    140ms;
    --dur-base:    220ms;
    --dur-reveal:  550ms;

    --transition-fast: 140ms ease;
    --transition-base: 220ms ease;
    --transition-slow: 400ms ease;

  }
}