/* ============================================================
   START AŠ — DESIGN TOKENS
   Single source of truth for the visual system.
   Mirrored for WordPress in ../../wp/theme.json.
   Usage notes: docs/02-design-tokens.md
   ============================================================ */

:root {

  /* ---------- COLOR · brand ---------- */
  --color-navy:        #1E2853;  /* Primary brand navy — dark bands, headings, body text */
  --color-red:         #F0514B;  /* Coral red accent — CTAs, kickers, highlights */
  --color-red-dark:    #D8433D;  /* Accent :hover */
  --color-red-darker:  #C23A34;  /* Accent :active (spec addition, not in mock) */
  --color-cream:       #F7F8F4;  /* Page ground; light text on navy */
  --color-white:       #FFFFFF;

  /* ---------- COLOR · derived / neutrals ---------- */
  --color-text:         var(--color-navy);
  --color-text-soft:    #3A4470;  /* Secondary text on light surfaces */
  --color-text-muted:   #9AA0B5;  /* Muted text, placeholders, unconfirmed program rows */
  --color-border:       #ECEDF1;  /* Hairline borders / dividers on light */
  --color-border-input: #D8DAE4;  /* Input borders on light cards */
  --color-border-dash:  #C6C9D6;  /* Dashed "open slot" badge border */
  --color-red-tint:     #FDEDEC;  /* Light red fill — chips, notices */

  /* ---------- COLOR · on dark (cream at reduced alpha over navy) ---------- */
  --on-dark-strong:        rgba(247, 248, 244, 0.92); /* Emphasised text on navy */
  --on-dark-body:          rgba(247, 248, 244, 0.85); /* Body text on navy */
  --on-dark-muted:         rgba(247, 248, 244, 0.72); /* Secondary text on navy */
  --on-dark-faint:         rgba(247, 248, 244, 0.60); /* Legal / meta text on navy */
  --on-dark-border:        rgba(247, 248, 244, 0.15); /* Hairlines on navy */
  --on-dark-border-strong: rgba(247, 248, 244, 0.60); /* Outline-button border on navy */
  --on-dark-fill:          rgba(247, 248, 244, 0.08); /* Subtle fills on navy */

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: "Museo Sans", "Avenir Next", "Segoe UI", sans-serif;

  --weight-light:  300;   /* Body copy */
  --weight-medium: 500;   /* UI text, nav links, meta */
  --weight-bold:   700;   /* Kickers, labels, secondary buttons */
  --weight-black:  900;   /* Headings, numbers, primary buttons */

  /* Type scale (desktop values; overridden per breakpoint in main.css §12) */
  --text-hero:    72px;   /* h1 hero title */
  --text-h2:      44px;   /* Section headings */
  --text-ticket:  46px;   /* Ticket time display */
  --text-stat:    34px;   /* Fact-bar numbers */
  --text-h3:      20px;   /* Card titles, stage names */
  --text-faq:     18px;   /* FAQ questions */
  --text-lead-lg: 19px;   /* Hero subtitle */
  --text-lead:    18px;   /* Section intros */
  --text-body-lg: 17px;   /* Large buttons, program times, mobile menu links */
  --text-body:    16px;   /* Default body / card copy */
  --text-ui:      15px;   /* Nav links, inputs, fact labels, ticket copy */
  --text-label:   14px;   /* Kickers, form labels */
  --text-small:   13px;   /* Fine print, program row subtitles */
  --text-badge:   12px;   /* Price chips */
  --text-badge-sm: 11px;  /* Program status badges */

  --leading-hero:  1.04;
  --leading-h2:    1.12;
  --leading-body:  1.55;
  --leading-lead:  1.6;

  --tracking-hero:    -1px;
  --tracking-h2:      -0.5px;
  --tracking-caps:    3px;    /* Kickers (14px caps) */
  --tracking-caps-sm: 2px;    /* Small caps labels (ticket type, footer headings) */

  /* ---------- SPACING (4px base scale) ---------- */
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-28:  28px;
  --space-32:  32px;
  --space-36:  36px;
  --space-40:  40px;
  --space-44:  44px;
  --space-48:  48px;
  --space-56:  56px;
  --space-64:  64px;
  --space-72:  72px;
  --space-80:  80px;   /* Default section vertical padding, desktop */
  --space-88:  88px;   /* Hero top padding */
  --space-104: 104px;  /* Hero bottom padding */

  /* ---------- LAYOUT ---------- */
  --container: 1280px; /* Max content width */
  --gutter:    32px;   /* Horizontal page padding (20px ≤900px — see main.css §12) */
  --content-narrow: 860px; /* FAQ column */

  /* ---------- RADII ---------- */
  --radius-sm:   8px;    /* Status badges */
  --radius-md:   10px;   /* Inputs, nav CTA, chips, pin card */
  --radius-lg:   12px;   /* Buttons, venue chip, partner tiles */
  --radius-xl:   16px;   /* Cards, tickets, stage cards, FAQ items */
  --radius-pill: 999px;  /* Price chips */

  /* ---------- SHADOWS ---------- */
  --shadow-card:  0 16px 40px rgba(30, 40, 83, 0.12); /* Floating fact bar */
  --shadow-float: 0 10px 28px rgba(0, 0, 0, 0.35);    /* Map pin label card */
  --shadow-pin:   0 4px 14px rgba(0, 0, 0, 0.4);      /* Map pin dot */

  /* ---------- MOTION ---------- */
  --transition-fast: 150ms ease;      /* Hover/focus color + background */
  --transition-menu: 200ms ease-out;  /* Mobile menu reveal */
  --ping-duration:   2.4s;            /* Map pin pulse (ease-out, infinite) */

  /* ---------- Z-INDEX ---------- */
  --z-header: 50;
}

/* ---------- BREAKPOINTS (reference only — CSS cannot read vars
   in @media; keep in sync with main.css §12 and theme.json) ----------
   --bp-sm: 600px    phone
   --bp-md: 900px    tablet / mobile nav switch
   --bp-lg: 1100px   hero map visibility
------------------------------------------------------------------ */