/*
 * tokens.css — wanderingwithpride.com design tokens
 * Saffron palette — Michael Eisinger personal brand
 * Updated: 2026-03-15
 *
 * Usage: import before all other stylesheets.
 * All values sourced from DESIGN-BRIEF.md Section 6 + PRD TASK-02.
 */

@layer tokens {
  :root {

    /* ─── Color: Saffron Palette (semantic names) ──────────────── */

    --ink:            #0E0E0E;  /* Primary text — near-black with warmth */
    --cream:          #F7F5F1;  /* Page background — "meant to be read" */
    --sand:           #EDE9E1;  /* Section alternation, card backgrounds */
    --slate:          #2A3042;  /* Dark sections: hero left, footer, features */
    --slate-light:    #3A4258;  /* Hover / lighter slate variant */
    --saffron:        #E8A020;  /* Brand accent — warm gold, editorial */
    --saffron-dark:   #C87010;  /* Hover state for saffron */
    --rust:           #B84A2C;  /* WanderSafe caution states only */
    --rust-dark:      #963C24;  /* Hover state for rust */
    --sage:           #4A6741;  /* WanderSafe "Safe" state only */
    --text-secondary: #5A5A62;  /* Secondary text, captions, meta */
    --text-inverse:   #F5F2EC;  /* Text on dark (slate/ink) backgrounds */
    --border-light:   #D8D4CC;  /* Subtle dividers on light backgrounds */
    --border-dark:    #3A3F52;  /* Subtle dividers on dark backgrounds */

    /* Backward-compat aliases used by index.html inline styles */
    --slate-mid:  #1E2535;             /* Darker slate — inline nav overlay */
    --cream-dark: #E8E4DC;             /* Slightly darker cream — card borders */
    --text-muted: rgba(247,245,241,0.60); /* Muted text on dark backgrounds */


    /* ─── Color: --color-* system aliases ─────────────────────── */
    /*
     * Parallel --color-* namespace for design system consistency.
     * These map 1:1 to the semantic names above.
     */

    --color-ink:          #0E0E0E;
    --color-cream:        #F7F5F1;
    --color-sand:         #EDE9E1;
    --color-slate:        #2A3042;
    --color-saffron:      #E8A020;
    --color-saffron-dark: #C87010;

    /*
     * --color-saffron-text: use for saffron-colored text on dark (slate/ink) backgrounds.
     * WCAG audit result: saffron #E8A020 on slate #2A3042 = 5.93:1 (AA PASS, normal text).
     * Saffron passes on slate — this token maps directly to --color-saffron.
     * Do NOT use --color-saffron or --color-saffron-dark as text on cream backgrounds
     * without checking: saffron-dark #C87010 on cream #F7F5F1 = 3.34:1 (FAIL).
     * Use --color-saffron-on-cream (#9A5408, 5.29:1) for any saffron text on cream.
     */
    --color-saffron-text:     var(--color-saffron);      /* text on dark bg — 5.93:1 on slate */
    --color-saffron-on-cream: #9A5408;                   /* text on cream bg — 5.29:1 on cream */


    /* ─── Font Families ──────────────────────────────────────────── */
    /*
     * Display headings (H1): DM Serif Display
     * UI / headings (H2–H4, nav, labels): Syne
     * Body / blog copy: Source Serif 4
     * Code / mono: JetBrains Mono
     */

    --font-display: 'DM Serif Display', Georgia, serif;
    --font-ui:      'Syne', system-ui, sans-serif;
    --font-body:    'Source Serif 4', Georgia, serif;
    --font-mono:    'JetBrains Mono', monospace;


    /* ─── Fluid Type Scale (clamp: mobile → desktop) ─────────────── */

    --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm:   clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lg:   clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --text-xl:   clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --text-3xl:  clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --text-4xl:  clamp(2.5rem, 1.8rem + 3.5vw, 4rem);
    --text-5xl:  clamp(3rem, 2rem + 5vw, 5.5rem);


    /* ─── Fixed Type Scale (pixel-exact, for layout math) ────────── */
    /*
     * Hero sizes: large editorial headers, full-bleed.
     * Section sizes: page-level headings.
     * Body/label: prose and UI chrome.
     */

    --text-hero-lg:    96px;   /* Hero H1 — desktop full bleed */
    --text-hero-md:    64px;   /* Hero H1 — mid breakpoint */
    --text-hero-sm:    44px;   /* Hero H1 — mobile */

    --text-section-lg: 52px;   /* Section heading — desktop */
    --text-section-md: 38px;   /* Section heading — mid */
    --text-section-sm: 28px;   /* Section heading — mobile */

    --text-body-lg:    22px;   /* Lead / intro paragraph */
    --text-body-md:    18px;   /* Standard body copy */
    --text-body-sm:    16px;   /* Secondary body / captions */

    --text-label:      13px;   /* Labels, eyebrows, meta */


    /* ─── Spacing Scale (4px base) ──────────────────────────────── */

    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  40px;
    --space-8:  48px;
    --space-9:  64px;
    --space-10: 80px;
    --space-11: 96px;
    --space-12: 112px;
    --space-13: 128px;
    --space-14: 160px;
    --space-15: 192px;
    --space-16: 256px;


    /* ─── Border Radius (sharp brand — max 2px) ──────────────────── */

    --radius-none: 0;
    --radius-sm:   2px;
    --radius-md:   2px;   /* intentional: brand stays sharp */

    /* Backward-compat aliases used by index.html inline styles */
    --radius-pill: 2px;   /* was used for buttons; matches brand max */
    --radius-lg:   12px;  /* was used for world-card; preserved for compat */


    /* ─── Shadow Scale ───────────────────────────────────────────── */

    --shadow-sm: 0 1px 2px rgba(14, 14, 14, 0.10);
    --shadow-md: 0 4px 12px rgba(14, 14, 14, 0.14);
    --shadow-lg: 0 8px 32px rgba(14, 14, 14, 0.20);


    /* ─── Transition Tokens ──────────────────────────────────────── */

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

  }
}

html { scroll-behavior: smooth; }