/*
 * Design tokens — the single source of truth for color, spacing, radii and
 * type scale. Every other stylesheet reads from these custom properties
 * instead of hard-coding values (CLAUDE.md hard rule).
 *
 * Primary blue was tuned against the real logo (original-assets/6228-
 * wordmark-blue.png sampled to #015691) rather than used as the brief's
 * unadjusted default — see DESIGN_DIRECTION.md.
 */

:root {
  /* Brand palette */
  --color-bg: #FFFFFF;
  --color-bg-secondary: #F4F8FF;
  --color-primary: #0B5FA8;
  --color-primary-dark: #084A85;
  --color-primary-light: #E5F0FB;
  --color-logo-blue: #015691; /* the raw sampled logo color, for flat brand moments */
  --color-heading: #102A56;
  --color-body: #475569;
  --color-border: #DFE8F5;
  --color-white: #FFFFFF;
  --color-on-primary: #FFFFFF;
  --color-footer-text: #C7D3E8;
  --color-glass: rgba(255, 255, 255, 0.9);
  --color-scrim: rgba(10, 26, 58, 0.86); /* navy scrim under text laid over photos */
  --color-scrim-soft: rgba(10, 26, 58, 0);

  /* Sub-brand accents (sampled from each project's own logo) */
  --color-accent-matx: #189DDE;
  --color-accent-girlsfirst: #D12FA4;
  --color-accent-machina: #03375D;

  /* Feedback / focus */
  --color-focus-ring: #0B5FA8;

  /* Spacing scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

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

  /* Type scale */
  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --text-3xl: 3.5rem;
  --text-4xl: clamp(2.75rem, 6vw + 1rem, 6rem);
  /* Deliberately exceeds a generic display-type ceiling — BRIEF.md asks
     explicitly for "oversized, expressive typography," and the hero
     headline was the single biggest gap against the reference image.
     Used only by .hero-heading; --text-4xl stays free for other pages. */
  --text-hero: clamp(2.75rem, 1rem + 11vw, 10.5rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* Shadows */
  --shadow-nav: 0 8px 30px rgba(16, 42, 86, 0.08);
  --shadow-card: 0 4px 20px rgba(16, 42, 86, 0.06);
  --shadow-card-hover: 0 14px 36px rgba(16, 42, 86, 0.12);
  --shadow-photo: 0 24px 60px rgba(16, 42, 86, 0.18);

  /* Motion durations (kept within BRIEF.md's specified ranges) */
  --duration-entrance: 650ms;
  --duration-reveal: 550ms;
  --duration-fast: 220ms;
  /* Cross-document page transitions */
  --duration-page-fade: 220ms;
  --duration-page-morph: 420ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  /* The brief specifies a light theme site-wide; dark mode is intentionally
     not implemented, so no overrides here. This block exists so future
     dark-mode work has a documented, deliberate starting point. */
}

/* Drawing-sheet and interactive-edition tokens: the active visual system
   lives in this one file, per the project rules. */
:root {
  /* The declared module. Every rule, panel edge and callout lands on it. */
  --mod: 8px;
  --mod-major: 64px;
  --rule-minor: #F5F8FC;
  --rule-major: #E8EFF8;
  --rule-ink: var(--color-heading);
  --tick: 10px;
  --hair: 1px;
  --color-selection: #D6E6F7;
  --text-sheet-label: 0.75rem;
  --text-sheet-hero: clamp(2.75rem, 8.2vw, 7.25rem);
  --text-sheet-hero-tablet: clamp(3rem, 12vw, 6.5rem);
  --text-sheet-hero-mobile: clamp(2.25rem, 12.5vw, 4rem);
  --text-sheet-section: clamp(2rem, 3.9vw, 3.5rem);
  --text-sheet-display: clamp(2.5rem, 5vw, 4.5rem);
  --text-sheet-index: clamp(4rem, 6vw, 6rem);

  /* Interactive edition */
  --color-modal-backdrop: rgba(7, 20, 44, .9);
}
@media (max-width: 900px) {
  :root { --mod-major: 48px; }
}

/*
 * Per-project page themes. Each project page carries one of these on <html>,
 * and it repoints the primary family — so buttons, links, rules, the sheet
 * grid and the map all take the project's colour with no component changes.
 *
 * --accent is the logo colour itself, used only for large fills and marks.
 * --color-primary is a DARKENED form of it, because several of the logo
 * colours do not reach 4.5:1 on white and this token is used for body-sized
 * text: #D12FA4 is 4.49:1 (fails), the #A3237F below is 6.7:1 (passes).
 * Contrast was computed per theme, not eyeballed.
 *
 * Mecha Forge has no brand colour to sample — its logo is pure greyscale
 * (max channel spread of 4 across 393k opaque pixels), so it takes a graphite
 * theme drawn from that greyscale rather than an invented hue.
 */
:root.theme-girlsfirst {
  --accent: var(--color-accent-girlsfirst);
  --color-primary: #A3237F;
  --color-primary-dark: #7C1A61;
  --color-primary-light: #FBEAF5;
  --color-focus-ring: #A3237F;
  --rule-minor: #FDF4FA;
  --rule-major: #F6E3EF;
}
:root.theme-matx {
  --accent: var(--color-accent-matx);
  --color-primary: #0E5F88;
  --color-primary-dark: #0A465F;
  --color-primary-light: #E4F3FB;
  --color-focus-ring: #0E5F88;
  --rule-minor: #F3FAFE;
  --rule-major: #E1F0F8;
}
:root.theme-machina {
  --accent: var(--color-accent-machina);
  --color-primary: #03375D;
  --color-primary-dark: #02243D;
  --color-primary-light: #E6EEF4;
  --color-focus-ring: #03375D;
  --rule-minor: #F4F7FA;
  --rule-major: #E3EBF2;
}
:root.theme-mechaforge {
  --accent: #636363;
  --color-primary: #3D4854;
  --color-primary-dark: #28313B;
  --color-primary-light: #EDEFF2;
  --color-focus-ring: #3D4854;
  --rule-minor: #F7F8F9;
  --rule-major: #E8EAED;
}

/* Rookieverse departure: the orange liquid sweep requested by the team. */
:root {
  --color-rookie-wipe: #F5A000;
  --radius-rookie-flow: 50vmax;
  --duration-rookie-wipe: 850ms;
  --ease-rookie-wipe: cubic-bezier(.65, 0, .22, 1);
}