/*
 * YGO universe design system — "Neon/Ember" — shared foundations.
 * Dark-only. One flat accent color per site — never a gradient.
 *
 * Covers colors, radius scale, vertical rhythm, page gutter, and
 * typefaces — the values, not the components. A component recipe
 * (button/badge/card treatment) is documented in README.md as prose,
 * not shipped as a variable here, since it's a combination of several
 * of these values rather than a single one.
 *
 * Usage: link this file, then define --accent and --accent-text for
 * your own site BEFORE any component CSS runs (order relative to this
 * file's own <link> doesn't matter — these two are intentionally left
 * undefined here so each site's local override is the only source):
 *
 *   ygoproxy (proxy generator)  --accent: #FF8A3D;  --accent-text: #1A0E05;
 *   calc     (life-points calc) --accent: #00D3F2;  --accent-text: #04181C;
 *   judge    (rulings chatbot)  --accent: #7C5CFF;  --accent-text: #0B0716;
 *
 * A site may define its own additional local custom properties beyond
 * this shared set (e.g. calc's --c1/--c2 player colors — proxy/judge
 * have no "player" concept, so those stay local to calc, not here) —
 * just never reuse a name already defined in this file for something
 * else.
 *
 * The responsive values below (--gutter, --rhythm-*) already redefine
 * themselves per chrome breakpoint (téléphone / tactile large /
 * desktop) INSIDE this file — a site just uses var(--gutter) etc.
 * everywhere and gets the right value for free, it doesn't re-derive
 * the breakpoint logic itself.
 *
 * See README.md for the full chrome breakpoint table, page-composition
 * gabarits, button/card component recipes, and the logo construction.
 */

:root {
  /* surfaces — layered darkness: void < surface < card < raised */
  --bg: #07080B;
  --surface: #0E1016;
  --card: #161A24;
  --raised: #1C2130;
  --raised-hover: #232838; /* secondary/ghost-button hover — judge and calc had each
                              reinvented this exact value independently before it was
                              promoted here (caught by check-drift.js, 2026-08-29) */
  --border: rgba(255, 255, 255, 0.07);

  /* text */
  --text: #EDEFF5;
  --text-secondary: #8A90A3;
  --muted-2: #6E7488;
  --dim: #3A4050;

  /* semantic — state, never identity. Same across all 3 sites regardless of accent. */
  --damage: #FF4D6D;
  --damage-text: #2A0710;
  --gain: #34E5A0;
  --warn: #FFB22C;

  /* card attributes — identity, never state (the inverse of damage/gain/warn above: a
     card's attribute never changes, so this behaves more like the per-service --accent
     than a state color). --attr-dark is deliberately NOT the canonical TCG purple
     (~#6B3FA0) — see README.md §Card attributes for why. */
  --attr-dark: #5A4080;
  --attr-light: #E8CE5C;
  --attr-fire: #FF6A45;
  --attr-water: #3D9BFF;
  --attr-earth: #C08A4E;
  --attr-wind: #6BCB4D;
  --attr-divine: #F0A73C;

  /* card frame types — same identity-not-state rationale as --attr-* above, for the 9
     Yu-Gi-Oh! frame types. --frame-fusion is deliberately off the blue-violet axis already
     occupied twice (--accent, --attr-dark) — see README.md §Card frame types. --frame-xyz
     is deliberately not literal black — a black border on --bg/--card is a contrast failure,
     not a style choice. */
  --frame-normal: #C9A66B;
  --frame-effect: #E0833C;
  --frame-fusion: #A855C4;
  --frame-ritual: #4C7FD9;
  --frame-synchro: #D8DCE6;
  --frame-xyz: #383E52;
  --frame-link: #33507A;
  --frame-spell: #4A9D5C;
  --frame-trap: #D14F8C;

  /* link color defaults to the site's own accent unless overridden */
  --link-color: var(--accent);

  /* typefaces */
  --font-display: 'Chakra Petch', sans-serif; /* headings, logo wordmark, nav, buttons/CTAs, badges, section labels */
  --font-body: 'Space Grotesk', sans-serif;   /* body copy, everything else */

  /* radius scale */
  --radius-phone: 28px;  /* calc's full-screen mobile frame */
  --radius-card: 16px;   /* cards, panels (14px on tighter/nested contexts) */
  --radius-card-sm: 14px;
  --radius-key: 12px;    /* keys, buttons (10px on smaller/secondary controls) */
  --radius-key-sm: 10px;
  --radius-pill: 999px;  /* badges, timer, watermark */

  /* vertical rhythm scale (desktop values — redefined per breakpoint below) */
  --rhythm-section: 96px; /* between two page sections */
  --rhythm-block: 56px;   /* header→title, title→card */
  --rhythm-cta: 26px;     /* chapô→boutons */
  --rhythm-title: 18px;   /* titre→chapô */
  --rhythm-tight: 12px;   /* à l'intérieur d'un bloc */

  /* page gutter + max content width — same for all 3 gabarits, all 3 sites */
  --gutter: 56px;
  --content-max: 1440px;

  /* Hero typography — the exact values that used to be re-invented per site (see components.css
     §Hero for the classes that apply these; documented here in raw form for anyone composing
     custom markup). ygoproxy is the source for h1/eyebrow (already matched by judge); the hero
     intro paragraph never had an explicit value anywhere until this line — ygo-calc-online's
     already-considered value was adopted as the shared reference 2026-08-25. */
  --text-h1: clamp(1.75rem, 4vw, 3rem); /* 28px → 48px */
  --text-h1-weight: 600;
  --text-h1-line: 1.15;
  --text-h1-tracking: -0.005em;

  --text-eyebrow-size: 11px;
  --text-eyebrow-weight: 500;
  --text-eyebrow-tracking: 0.2em;

  --text-hero-intro-size: 16px;
  --text-hero-intro-line: 1.65;
  --text-hero-intro-max: 520px;

  /* Primary CTA button — proxy's own hero CTA never matched this (16px, no tracking, radius 10);
     calc and judge independently converged on this small/uppercase/tracked recipe, confirmed as
     the shared reference 2026-08-25 (proxy updates to match in a later pass, not done yet). */
  --btn-font-size: 14px;
  --btn-font-weight: 600;
  --btn-tracking: 0.05em;
  --btn-padding: 16px 32px;
  --btn-radius: var(--radius-key); /* 12px */
  --btn-hover-brightness: 1.10;

  /* Header — edge-anchored, not capped to --content-max (see README §Chrome). Desktop-only here;
     phone/tactile-large overrides live in head.ejs-equivalent per site since they also touch
     logo/nav sizing, not just padding. */
  --header-padding: 24px 56px 20px;

  /* Nav pill — consistent across proxy/calc/judge as-is, font inherits --font-body (NOT
     --font-display — despite foundations.css historically saying nav uses the display face,
     all three sites' actual nav pills use body/Space Grotesk; treat that as the real rule). */
  --navpill-padding: 7px 12px;
  --navpill-font-size: 11px;
  --navpill-font-weight: 500;
  --navpill-radius: 7px; /* component-specific, deliberately off the --radius-* scale */
  --navpill-line: 1.6;
}

/* Chrome tactile large — >=640px + pointeur grossier (tablette, foldable déplié, écran externe) */
@media (min-width: 640px) and (pointer: coarse) {
  :root {
    --gutter: 32px;
  }
}

/* Chrome téléphone — <640px */
@media (max-width: 639px) {
  :root {
    --gutter: 20px;
    --rhythm-section: 56px;
    --rhythm-block: 32px;
    /* --rhythm-cta/--rhythm-title/--rhythm-tight stay the same on phone per the brief */
  }
}