/* ============================================================
   tokens.css — single source of truth for design tokens
   ============================================================
   Extracted from index.html on 2026-04-26.
   Linked by index.html, sketches/case-study/trainee_v22_editorial.html,
   sketches/case-study/trainee/trainee_v24_template.html, about.html.

   Page-specific tokens (per-card colors, page-only widths, etc.)
   stay inline in each file as :root overrides.
   If editing here, also verify the inline :root in index.html stays consistent.

   2026-04-27 expansion (per `wise-questing-thunder` plan):
     · Added blue + peach + mint + red color families (port from index.html)
     · Added --font-serif (Instrument Serif italic) for case-study hero headlines
     · Added cursor tokens for page-wide interactive overlay
   ============================================================ */

:root {
    /* === Base palette === */
    --bg-base: #f8fafc; /* Very soft slate-tinted white */
    --surface: #ffffff; /* Pure white cards */
    --text-main: #0f172a; /* Slate 900 */
    --text-muted: #64748b; /* Slate 500 */
    --line-color: #e2e8f0; /* Slate 200 */

    /* === Brand color — Synergym.AI / Trainee accent === */
    --brand-pastel: #f3e8ff;
    --brand-solid: #7c3aed; /* Violet 600 */

    /* === Per-project accent families (for case-study `data-surface` swaps) ===
       Trainee  → --brand-* (purple)
       Workout  → --blue-*
       Tasks    → --peach-*
       Mint + red are decorative (Process spine node colors). */
    --mint-pastel: #d1fae5;
    --mint-solid: #10b981;
    --blue-pastel: #dbeafe;
    --blue-solid: #3b82f6;
    --peach-pastel: #ffedd5;
    --peach-solid: #f97316;
    --red-solid:   #ef4444; /* Process node 05 only — no other use */

    /* === Slate accents === */
    --slate-muted: #64748b; /* Slate 500 — muted accents */
    --slate-soft:  #cbd5e1; /* Slate 300 — soft strokes */
    --accent-gray: #f1f5f9; /* Slate 100 — subtle backgrounds */

    /* === Strokes — subtly tinted hue per family (link border to accent) === */
    --line-brand-soft:   rgba(124, 58, 237, 0.14);
    --line-brand-hover:  rgba(124, 58, 237, 0.32);
    --line-blue-soft:    rgba(59, 130, 246, 0.14);
    --line-blue-hover:   rgba(59, 130, 246, 0.34);
    --line-peach-soft:   rgba(249, 115, 22, 0.16);
    --line-peach-hover:  rgba(249, 115, 22, 0.38);

    /* === Background washes (very low alpha, for surface tints) === */
    --bg-blue-wash:    rgba(59, 130, 246, 0.025);
    --bg-peach-wash:   rgba(249, 115, 22, 0.03);

    /* === Shadows — neutral slate baseline (depth) === */
    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --shadow-card:
        0 1px 2px 0 rgba(15, 23, 42, 0.04),
        0 8px 24px -8px rgba(15, 23, 42, 0.08);
    --shadow-hover:
        0 1px 2px 0 rgba(15, 23, 42, 0.04),
        0 24px 48px -12px rgba(15, 23, 42, 0.18);

    /* === Per-card hue shadows (same 2-layer depth, hue shift only) === */
    --shadow-blue:        0 1px 2px 0 rgba(59, 130, 246, 0.05),
                          0 4px 10px -2px rgba(59, 130, 246, 0.07);
    --shadow-blue-hover:  0 1px 2px 0 rgba(59, 130, 246, 0.06),
                          0 18px 36px -12px rgba(59, 130, 246, 0.16);
    --shadow-peach:       0 1px 2px 0 rgba(249, 115, 22, 0.05),
                          0 4px 10px -2px rgba(249, 115, 22, 0.07);
    --shadow-peach-hover: 0 1px 2px 0 rgba(249, 115, 22, 0.06),
                          0 18px 36px -12px rgba(249, 115, 22, 0.18);

    /* === Glows — purple gadgets on hero hotspots === */
    --glow-cta:       0 10px 28px rgba(124, 58, 237, 0.32);
    --glow-code:      0 -6px 18px rgba(124, 58, 237, 0.22),
                      0 20px 50px rgba(15, 23, 42, 0.18);
    --glow-data-node: 0 0 12px rgba(124, 58, 237, 0.40);

    /* === Gradients — shared between H1 text fill and purple scene accents.
       NOTE: case-study pages use BLACK typography, no gradient text.
       These gradients remain available for surface accents only. === */
    --gradient-brand: linear-gradient(135deg, #7c3aed 0%, #0f172a 62%);
    --gradient-blue:  linear-gradient(135deg, #3b82f6 0%, #0f172a 62%);
    --gradient-peach: linear-gradient(135deg, #f97316 0%, #0f172a 62%);

    /* === Dev Mode === */
    --blueprint-grid: rgba(124, 58, 237, 0.05);

    /* === Cursor tokens (page-wide custom cursor on case-study pages) ===
       Ring color inherits from `data-surface` palette via override.
       Trainee = brand purple; WB = blue; Tasks = peach. */
    --cursor-ring-color:   var(--brand-solid);
    --cursor-dot-color:    var(--text-main);
    --cursor-ring-size:    28px;
    --cursor-dot-size:     4px;
    --cursor-hover-scale:  1.4;

    /* === Spacing scale (8px grid) === */
    --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: 56px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;
    --space-13: 120px;
    --space-14: 160px;
    --space-15: 200px;

    /* === Type scale === */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-md: 18px;
    --text-lg: 24px;
    --text-xl: 32px;
    --text-2xl: 40px;
    --text-3xl: 52px;
    --text-display: 80px;   /* hero headline — Inter Tight 700 / -3px */

    /* === Fluid typography (clamp) ===
       Cap at desktop pinned values so ≥1280px is byte-identical.
       Floor is the mobile minimum. */
    --text-xl-fluid:      clamp(1.5rem,  2vw + 0.5rem,  2rem);    /* 24 → 32px */
    --text-2xl-fluid:     clamp(1.75rem, 3vw + 0.75rem, 2.5rem);  /* 28 → 40px */
    --text-3xl-fluid:     clamp(2.25rem, 4.5vw + 1rem,  3.25rem); /* 36 → 52px */
    --text-display-fluid: clamp(2.5rem,  6vw + 1rem,    5rem);    /* 40 → 80px */

    /* === Section rhythm === */
    --space-section-y:       clamp(48px, 10vw, 120px);
    --space-section-y-tight: clamp(40px, 8vw,  96px);

    /* === Radii === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* === Fonts ===
       Sans + Mono are universal.
       Serif is loaded ONLY on case-study pages (hero italic headline).
       Home + about keep Inter-only. */
    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:  'JetBrains Mono', 'SFMono-Regular', ui-monospace, Menlo, Monaco, monospace;
    --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

    /* === Container max-widths (page rhythm) === */
    --max-content:    1200px;
    --max-wide:       1400px;
    --max-hero-text:  720px;
}

/* ============================================================
   Case-Study Section Container System (2026-05-14, drift fix)
   ONE canonical wrap class for all case-study sections.
   New section MUST use .cs-wrap (or a documented variant).
   No per-section max-width on wrap classes — width lives ONLY here.
   ============================================================ */
.cs-wrap {
    max-width: 72rem;            /* canonical editorial flow — most sections */
    margin: 0 auto;
}
.cs-wrap--prose {
    max-width: 56rem;            /* centered prose / compact metadata (§7 quote, §9 details) */
}
.cs-wrap--grid {
    max-width: 80rem;            /* multi-column card grids (§13 next-case) */
}
.cs-wrap--padded {
    padding-inline: 16px;        /* gutter — used by sections that need horizontal padding (§3, §10 ss) */
}

/* Editorial flow — flex column layout, opt-in.
   Separated from .cs-wrap so the wrap stays single-purpose (width only).
   §5 uses it. §6 doesn't (rhythm owned by per-element margins). */
.cs-flow {
    display: flex;
    flex-direction: column;
    gap: 32px;
    text-align: left;
    align-items: stretch;
}

/* ============================================================
   Per-surface palette overrides — applied via [data-surface=*] on <body>.
   Lets case-study pages swap accent palettes with one attribute.
   ============================================================ */
[data-surface="trainee"] {
    --cursor-ring-color: var(--brand-solid);
}
[data-surface="workout"] {
    --cursor-ring-color: var(--blue-solid);
}
[data-surface="tasks"] {
    --cursor-ring-color: var(--peach-solid);
}

/* =====================================================================
   UNIFIED SITE HEADER — ported verbatim from index.html lines 228–359
   Source of truth for home + case-study + about pages.
   ===================================================================== */
header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: clamp(12px, 3vw, 24px) 5%;
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 100;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line-color);
    transition: all 0.3s ease;
}
header > .logo { justify-self: start; }
header > nav { justify-self: center; }
header > .header-cta { justify-self: end; }
header.scrolled { padding: clamp(8px, 2.5vw, 16px) 5%; box-shadow: var(--shadow-sm); }

.logo {
    text-decoration: none; color: var(--text-main);
    display: flex; flex-direction: column;
    line-height: 1.15;
    transition: transform 0.3s;
}
.logo:hover { transform: translateY(-2px); }
.logo-name { font-size: var(--text-base); font-weight: 700; letter-spacing: -0.3px; transition: color 0.3s; }
.logo:hover .logo-name { color: var(--brand-solid); }
.logo-title { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); letter-spacing: 0.2px; }

nav { display: flex; gap: var(--space-6); }
nav a { text-decoration: none; color: var(--text-muted); font-size: var(--text-base); font-weight: 500; transition: color 0.3s, transform 0.3s; display: inline-block; }
nav a:hover { color: var(--text-main); transform: translateY(-2px); }
nav a.active { color: var(--text-main); }

.header-cta {
    display: inline-flex; align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    background: var(--text-main); color: white;
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm); font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: background 0.3s, transform 0.3s;
}
.header-cta:hover { background: var(--brand-solid); transform: translateY(-1px); }
.header-cta .cta-arrow {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 0.95em;
    opacity: 0.85;
}

/* === Mobile hamburger toggle (≤640px only) ===
   Desktop nav stays exactly as-is. On phones the 4 links drop into a
   dropdown revealed by a 3-bar button. No emoji, no SVG deps — just
   spans + CSS. JS toggles an `.is-open` class on the header. */
.nav-hamburger {
    display: none;
    width: var(--space-8);
    height: var(--space-8);
    padding: 0;
    margin: 0;
    background: transparent;
    border: 1px solid var(--line-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    transition: border-color 0.25s;
}
.nav-hamburger:hover { border-color: var(--text-main); }
.nav-hamburger .bar {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--text-main);
    border-radius: 1px;
    transition: transform 0.25s, opacity 0.25s;
}
.nav-mobile-menu { display: none; }
@media (max-width: 640px) {
    /* Revert to flex on mobile — grid's 3-column structure doesn't fit
       the logo + hamburger 2-child layout cleanly. */
    header { display: flex; justify-content: space-between; }
    .nav-hamburger {
        display: inline-flex;
    }
    /* Desktop nav + CTA collapse into the dropdown */
    header > nav,
    header > .header-cta { display: none; }

    .nav-mobile-menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 5%;
        margin-top: var(--space-2);
        padding: var(--space-4);
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid var(--line-color);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-card);
        flex-direction: column;
        gap: var(--space-3);
        min-width: 180px;
    }
    header.is-open .nav-mobile-menu { display: flex; }
    .nav-mobile-menu a {
        text-decoration: none;
        color: var(--text-muted);
        font-size: var(--text-sm);
        font-weight: 500;
        padding: var(--space-2) 0;
    }
    .nav-mobile-menu a.active,
    .nav-mobile-menu a:hover { color: var(--text-main); }
    .nav-mobile-menu .header-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        margin-top: var(--space-2);
        padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }
    /* Hamburger open-state: collapse bars to an × */
    header.is-open .nav-hamburger .bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
    header.is-open .nav-hamburger .bar:nth-child(2) { opacity: 0; }
    header.is-open .nav-hamburger .bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
}

/* === Smart-sticky header (scroll-down hide, scroll-up reveal) === */
header { transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; }
header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { header { transition: none; } }

/* === Back link (case-study pages only — replaces logo on left) === */
.nav-back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  text-decoration: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color 0.3s, gap 0.3s;
}
.nav-back .arrow {
  display: inline-block;
  transition: transform 0.3s;
}
.nav-back:hover { color: var(--text-main); gap: var(--space-3); }
.nav-back:hover .arrow { transform: translateX(-3px); }
.nav-back:focus-visible { outline: 2px solid var(--text-main); outline-offset: 4px; border-radius: 2px; }

/* Case-study pages need top padding to clear the fixed header (home/about have hero with min-height: 100vh that absorbs the overlap) */
body[data-page="case-study"] { padding-top: 76px; }
@media (max-width: 640px) {
  body[data-page="case-study"] { padding-top: 64px; }
}