/* ═══════════════════════════════════════════════════════════════════════════
   COMIC CON BALTICS — DESIGN TOKENS
   Single source of truth for the WordPress theme. Import BEFORE main.css.

   Structure mirrors design-tokens/tokens.json (same names, camelCase→kebab).
   theme.json equivalents: design-tokens/theme.json.

   THE YEARLY RE-SKIN MODEL (important — read before hardcoding anything):
   • PERMANENT BODY tokens never change between editions. They are the neutral
     bone-paper frame that hosts any year's key art.
   • STAGE + ACCENT tokens change once per year (hero, footer, header, CTAs
     take on the year's character; accent is one pop color pulled from the
     year's mascot). In WP make these 6 values editable in one place
     (Customizer / ACF options), not scattered.
   • SUB-BRAND tokens are owned by products (Baltics Gaming Expo, ticket
     tiers), NOT by the year. Never re-skin these.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── COLOR · PERMANENT BODY ─────────────────────────────────────────────
     The light sections of the page. Never pure white backgrounds. */
  --color-bg:        #f4f1e8;  /* warm bone — default page background */
  --color-bg-alt:    #eae5d6;  /* deeper bone — alternating section bands (Relive) */
  --color-surface:   #ffffff;  /* cards sitting on bone, always with soft shadow */
  --color-ink:       #1a2b30;  /* primary text on light — near-black, warm-teal undertone */
  --color-ink-soft:  #5a656e;  /* secondary text, captions, labels on light */
  --color-hairline:  rgba(26, 43, 48, 0.12);  /* borders/dividers on light */

  /* ── COLOR · YEARLY STAGE (2027 values) ─────────────────────────────────
     Hero, header, tickets band context, footer. --color-stage-ink must ALWAYS
     be re-checked for contrast when the stage changes (a light-mascot year
     would flip it dark). */
  --color-stage:          #0b3d51;  /* 2027 deep teal */
  --color-stage-deep:     #06303f;  /* darker companion for layering / footer */
  --color-stage-soft:     #0e4a61;  /* lighter companion — photo-placeholder gradients */
  --color-stage-ink:      #f4f1e8;  /* text on stage — flips with stage */
  --color-stage-hairline: color-mix(in srgb, var(--color-stage-ink) 16%, transparent);

  /* ── COLOR · YEARLY ACCENT (2027 values) ────────────────────────────────
     One pop color from the mascot. Primary CTAs, eyebrow ticks, glow dots,
     marquee band, hover borders — carries the year through light sections too. */
  --color-accent:     #c8e000;  /* 2027 lime */
  --color-accent-ink: #06303f;  /* text ON the accent — contrast-checked */

  /* ── COLOR · FIXED SUB-BRANDS (never re-skinned) ────────────────────────*/
  --color-bge-bg:       #0a0a0c;  /* Baltics Gaming Expo section — near-black */
  --color-bge-ink:      #f2f2f4;  /* BGE text — cool white */
  --color-bge-red:      #ED1C24;  /* BGE brand red — CTAs, glows, HUD accents */
  --color-crimson:      #e0356b;  /* Superhero Pass */
  --color-crimson-deep: #c42a5d;  /* Superhero Pass gradient end / badge text */
  --color-crimson-text: #a8285a;  /* "Sold out" label text on light */
  --color-white:        #ffffff;

  /* ── TYPOGRAPHY · FAMILIES ──────────────────────────────────────────────
     Google Fonts: Anton 400 · Barlow Condensed 500/600/700 ·
     Hanken Grotesk 400/500/600/700/800. Mono is a system stack (no webfont). */
  --font-display: 'Anton', 'Arial Narrow', 'Impact', sans-serif;          /* headlines, prices, stats — ALL CAPS, weight 400 only */
  --font-body:    'Hanken Grotesk', 'Barlow', system-ui, sans-serif;      /* body copy, buttons */
  --font-label:   'Barlow Condensed', 'Arial Narrow', sans-serif;         /* eyebrows, nav, chips — uppercase + tracking */
  --font-mono:    ui-monospace, 'SF Mono', 'Courier New', monospace;      /* BGE HUD labels ONLY */

  /* ── TYPOGRAPHY · SIZE SCALE (desktop; responsive overrides in main.css) */
  --fs-display-xl: 96px;   /* hero H1            · lh .86 · Anton */
  --fs-display-lg: 60px;   /* BGE H2, price XL   · lh .88 / .84 · Anton */
  --fs-display-md: 50px;   /* featured pass name · lh .90 · Anton */
  --fs-display-sm: 46px;   /* section H2         · lh .95 · Anton */
  --fs-stat:       52px;   /* Relive stat number · lh .88 · Anton */
  --fs-countdown:  42px;   /* countdown digits   · lh 1   · Anton */
  --fs-h3:         34px;   /* single-pass price  · lh 1   · Anton */
  --fs-h4:         32px;   /* drawer links       · Anton */
  --fs-h5:         27px;   /* guest name, card titles · lh .98 · Anton */
  --fs-h6:         24px;   /* small card headings · lh .95–.98 · Anton */
  --fs-body-lg:    16px;   /* hero/BGE paragraph, inputs · lh 1.55–1.6 */
  --fs-body:       15px;   /* card paragraph · lh 1.55 */
  --fs-body-sm:    13.5px; /* small card copy · lh 1.5 */
  --fs-body-xs:    12.5px; /* fine print, consent text · lh 1.45–1.5 */
  --fs-label-lg:   14px;   /* nav links, section links · Barlow Cond 700 */
  --fs-label:      13px;   /* eyebrows, dropdown items · Barlow Cond 600/700 */
  --fs-label-sm:   12px;   /* sub-labels, validity lines, footer legal · 600/700 */
  --fs-label-xs:   11px;   /* badges, chips, tile captions, HUD lines · 600–800 */

  /* ── TYPOGRAPHY · LINE HEIGHTS ─────────────────────────────────────────*/
  --lh-display:  0.92;  /* hero H1 + every 64px band H1 — tightest value with daylight between wrapped lines at all widths; Anton caps + skew collide at the old 0.86/.88 (measured: 3.7–6px ink gap at 0.92) */
  --lh-price:    0.84;  /* big prices */
  --lh-heading:  0.95;  /* section H2 (with skew) */
  --lh-card:     0.98;  /* card-level Anton headings */
  --lh-body:     1.55;
  --lh-relaxed:  1.6;

  /* ── TYPOGRAPHY · SKEW (the CCB "lean") ────────────────────────────────
     Applied as transform: skewX() on Anton headings. Never skew body copy. */
  --skew-display: -5deg;  /* hero H1 */
  --skew-heading: -4deg;  /* section H2 */
  --skew-card:    -3deg;  /* card headings, footer tagline, guest names */

  /* ── TYPOGRAPHY · TRACKING (letter-spacing) ────────────────────────────*/
  --tracking-1: 0.02em;  /* marquee, big Anton lines that need slight air */
  --tracking-2: 0.04em;  /* button labels */
  --tracking-3: 0.08em;  /* urgent pills, footer legal */
  --tracking-4: 0.10em;  /* dropdown items, section links, badges */
  --tracking-5: 0.12em;  /* nav links, util bar, validity lines */
  --tracking-6: 0.14em;  /* tile captions, role chips */
  --tracking-7: 0.16em;  /* sub-labels, tier labels, kickers */
  --tracking-8: 0.18em;  /* eyebrows, hero badge, HUD header */
  --tracking-9: 0.22em;  /* BGE "// The Competitive Arena" kicker */

  /* ── SPACING SCALE ─────────────────────────────────────────────────────
     8-ish scale with two half-steps kept from the design (12, 20). */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;

  /* Layout */
  --container:      1400px;  /* max content width */
  --gutter:         20px;    /* min page side padding */
  --space-section:  96px;    /* vertical padding of body sections (was 88–100, normalized) */
  /* Full-bleed sections use:
     padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); */

  /* ── RADII ─────────────────────────────────────────────────────────────*/
  --radius-xs:   6px;    /* tiny chips (capacity tag) */
  --radius-sm:   8px;    /* dropdown menu items */
  --radius-md:   12px;   /* countdown cells, relive tiles, burger, icon tiles */
  --radius-lg:   16px;   /* pass cards, panels, newsletter band, dropdown panels */
  --radius-xl:   20px;   /* featured pass cards, guest cards, hero email band */
  --radius-pill: 999px;  /* every button, input, badge, lang toggle */

  /* ── SHADOWS ───────────────────────────────────────────────────────────*/
  --shadow-card:      0 2px 10px rgba(26, 43, 48, 0.05);   /* resting small card on bone */
  --shadow-card-md:   0 4px 18px rgba(26, 43, 48, 0.07);   /* resting featured card */
  --shadow-card-lg:   0 6px 20px rgba(26, 43, 48, 0.12);   /* guest cards, relive tiles */
  --shadow-hover:     0 12px 28px rgba(26, 43, 48, 0.10);  /* small card hover */
  --shadow-hover-lg:  0 18px 40px rgba(26, 43, 48, 0.20);  /* guest card hover */
  --shadow-pop:       0 18px 40px rgba(0, 0, 0, 0.40);     /* dropdown panels on stage */
  --shadow-deep:      0 18px 50px rgba(0, 0, 0, 0.50);     /* BGE arena panel */
  --shadow-accent:    0 6px 18px color-mix(in srgb, var(--color-accent) 25%, transparent);   /* lime CTA resting */
  --shadow-accent-lg: 0 10px 26px color-mix(in srgb, var(--color-accent) 36%, transparent);  /* lime CTA hover */
  --shadow-crimson:    0 18px 46px rgba(224, 53, 107, 0.34);  /* superhero card resting */
  --shadow-crimson-lg: 0 28px 64px rgba(224, 53, 107, 0.42);  /* superhero card hover */
  --shadow-red:        0 8px 28px rgba(237, 28, 36, 0.40);    /* BGE red CTA resting */
  --shadow-red-lg:     0 12px 34px rgba(237, 28, 36, 0.55);   /* BGE red CTA hover */

  /* ── MOTION ────────────────────────────────────────────────────────────
     Interactive transitions. Ambient animation durations live with their
     @keyframes in main.css (marquee 24s, float 6s, glow 5s, pulse 1.5s…). */
  --dur-fast: 0.15s;   /* color/border/link transitions, button lifts */
  --dur-med:  0.2s;    /* card lifts, dropdown reveal (was .18–.22, normalized) */
  --dur-slow: 0.3s;    /* header shrink/solidify, drawer slide, accordions (was .25–.3) */
  --dur-zoom: 0.5s;    /* photo zoom-on-hover inside cards (was .45–.5) */
  --ease:     ease;
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);  /* stat count-up (JS) */

  /* ── Z-INDEX ───────────────────────────────────────────────────────────*/
  --z-header: 90;
  --z-drawer: 95;

  /* ── BREAKPOINTS (reference only — CSS custom properties cannot be used
       inside @media; keep these in sync with main.css by hand) ──────────
     --bp-sm:  560px   phones — single-column everything, smallest type
     --bp-md:  620px   relive collage 4→2 columns
     --bp-nav: 860px   header collapses to burger + drawer; util bar hidden
     --bp-lg:  960px   page grids stack, hero stacks, section type steps down
     (tickets featured pair stacks at 960 — was 980, normalized) ─────────*/
}