/* BLITZCRIC × CSC F15 BLITZ — design tokens.
   One attribute switches the whole site: <html data-brand="blitz | f15">. */

:root {
  /* Shared neutrals */
  --text: #F4F4F6;
  --text-2: #B9BAC4;
  --text-3: #7D7F8C;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --card: rgba(255, 255, 255, .03);
  --card-hi: rgba(255, 255, 255, .055);
  --glass: rgba(16, 14, 18, .55);
  --blur: blur(18px) saturate(140%);

  /* Brand: Blitz (default) */
  --accent: #FFC15A;
  --accent-hi: #FFD98A;
  --accent-deep: #B5761C;
  --accent-rgb: 255, 193, 90;
  --bg: #050403;
  --glow: rgba(255, 150, 40, .18);
  --on-accent: #1A1003;

  /* Cricket event colours (match centre only) */
  --ev-four: #3FA9FF;
  --ev-six: #FFC15A;
  --ev-wicket: #E0234E;
  --ok: #3DDC97;
  --bad: #FF5C7A;

  /* Type */
  --font-display: 'Orbitron', 'Eurostile', 'Arial Black', sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-num: 'Garet', 'Barlow Condensed', 'Manrope', sans-serif;

  --fs-hero: clamp(64px, 10vw, 140px);
  --fs-h1: clamp(40px, 5.4vw, 72px);
  --fs-h2: clamp(28px, 3vw, 40px);
  --fs-h3: clamp(20px, 1.8vw, 24px);
  --fs-body: clamp(16px, 1.1vw, 17px);
  --fs-sm: 13px;
  --fs-xs: 12px;
  --lh-body: 1.6;
  --lh-ui: 1.4;
  --lh-head: 1.05;
  --track-display: .04em;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  --s-9: 120px;
  --section: var(--s-9);
  --card-pad: clamp(24px, 2.4vw, 32px);
  --gap: 24px;

  /* Layout */
  --page-max: 1280px;
  --page-pad: clamp(20px, 5vw, 64px);
  --nav-w: 248px;
  --top-h: 76px;
  --tab-h: 64px;

  /* Shape and motion */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 160ms var(--ease-out);
  --t: 320ms var(--ease-out);

  /* ---- Legacy aliases: older view CSS reads these names ---- */
  --ink-950: var(--bg); --ink-900: var(--bg);
  --ink-850: #0E0C10; --ink-800: #151318; --ink-750: #1B181F; --ink-700: #26222B; --ink-600: #332E39;
  --paper-50: var(--text); --paper-100: var(--text); --paper-200: var(--text-2); --paper-300: var(--text-2);
  --paper-400: var(--text-3); --paper-500: var(--text-3); --paper-700: #55525E;
  --crimson-500: var(--accent); --crimson-400: var(--accent-hi); --crimson-300: var(--accent-hi);
  --crimson-700: var(--accent-deep); --crimson-glow: var(--glow);
  --neon-cyan: var(--accent); --neon-cyan-dim: rgba(var(--accent-rgb), .12);
  --neon-magenta: var(--accent); --neon-magenta-dim: rgba(var(--accent-rgb), .1);
  --ev-extra: #FFC53D; --ev-dot: #55525E; --ev-gold: var(--ev-six); --ev-gold-light: #FFE08A;
  --gold: var(--ev-six); --cyan: var(--ev-four);
  --team-primary: var(--accent); --team-secondary: var(--accent-hi); --team-deep: #1A0B07;
  --font-stats: var(--font-num);
  --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px;
  --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-40: 40px;
  --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-72: 72px; --space-96: 96px; --space-120: 120px;
  --page-max-width: var(--page-max); --page-padding-inline: var(--page-pad);
  --header-height: var(--top-h); --header-height-condensed: var(--top-h);
  --radius-xs: 6px; --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: 32px; --radius-pill: var(--r-pill);
  --skew-panel: none; --counter-skew: none;
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 16px 48px rgba(0,0,0,.45);
  --shadow-elevated: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 64px rgba(0,0,0,.55);
  --shadow-glow-crimson: 0 0 32px var(--glow); --shadow-glow-cyan: 0 0 24px var(--glow); --shadow-glow-team: 0 0 24px var(--team-primary);
  --glass-bg: var(--glass); --glass-border: var(--line); --glass-blur: var(--blur);
  --ease-out-back: var(--ease-back); --ease-expo: var(--ease-out); --ease-spring: var(--ease-back);
  --transition-fast: var(--t-fast); --transition-smooth: var(--t); --transition-slow: 500ms var(--ease-out);
}

:root[data-brand="f15"] {
  --accent: #E0234E;
  --accent-hi: #FF4D6D;
  --accent-deep: #8E0F2C;
  --accent-rgb: 224, 35, 78;
  --bg: #07060A;
  --glow: rgba(224, 35, 78, .16);
  --on-accent: #FFFFFF;
}

@media (max-width: 760px) {
  :root { --section: var(--s-8); --gap: 16px; }
}