/* Design tokens — from the approved mockup A3 "Clean Bench"
 * (__SITE_KIT/mockups/betprofessor.co/a3-home.html + a3-event.html), 2026-10-12.
 *
 *   · names say the role, never the value;
 *   · mockup values are moved as they are;
 *   · "added" marks what the mockup did not define but the site needs.
 *
 * The short names (--bg, --ink, --accent…) are the mockup's own and are what
 * components.css uses; the long --color-* names are kept as aliases for the
 * kit's base layer.
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --bg: #F2F5F8;               /* page */
  --surface: #FFFFFF;          /* tiles, cards, slip */
  --surface-2: #EEF2F6;        /* inner wells, chips, legs */
  --line: #E2E8EE;             /* hairlines */
  --line-strong: #CBD5DE;      /* inputs, hovered borders */
  --ink: #0E1C27;              /* text, dark tiles */
  --ink-2: #596A77;            /* secondary text — 5.6:1 on #fff, 5.1:1 on --bg */
  --accent: #78DB00;           /* actions and prices (ТЗ §7.2) */
  --accent-hover: #8CEC16;
  --accent-pressed: #5AB500;
  --accent-ink: #173000;       /* text on green — 9.9:1 */
  --brand: #8B3FD9;            /* brand purple: logo, links on hover, SGM */
  --c-th: #8B3FD9;             /* Thoroughbreds */
  --c-gr: #0E9A88;             /* Greyhounds */
  --c-ha: #E07400;             /* Harness */
  --warn: #FFC24A;             /* price-change flash */
  --focus: #2F6FE4;

  /* ── Colour: added (not in the mockup) ───────────────────────────────── */
  --warn-bg: #FFF1CC;  --warn-ink: #6B4A00;  --warn-line: #F2C94C;   /* demo pill, notes, "soon" */
  --error: #B42335;            /* errors on light (ТЗ §7.2: тёмный красный на белом) */
  --error-bg: #FDECEE;
  --success: #2F6B00;          /* text-safe green on white — 6.3:1 */
  --success-bg: #EEF9E0;
  --brand-ink: #6E2DBD;        /* purple as small text on white — 6.6:1 */
  --brand-hover: color-mix(in srgb, var(--brand) 85%, black);
  --ink-hover: color-mix(in srgb, var(--ink) 85%, var(--brand));
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent);
  --scrim: rgba(14, 28, 39, .45);

  /* aliases for the kit's base layer */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--ink);
  --color-muted: var(--ink-2);
  --color-brand: var(--brand);
  --color-border: var(--line);
  --color-error: var(--error);
  --color-success: var(--success);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font: "Inter Tight", Arial, sans-serif;
  --font-display: var(--font);
  --font-body: var(--font);
  --fs-display: clamp(30px, 4.2cqi, 52px);   /* banner headline */
  --fs-h1: 28px;               /* page title (ТЗ §7.3: 24–28) */
  --fs-h2: 22px;               /* section title */
  --fs-h3: 18px;               /* tile / card title */
  --fs-body: 16px;
  --fs-table: 14px;            /* dense rows */
  --fs-small: 13px;
  --fs-caption: 12px;
  --fs-kicker: 11px;           /* uppercase kicker, 800, tracking .12em */
  --fs-odds: 18px;
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-base: 1.45;

  /* ── Space: from the mockup (4-pt scale) ─────────────────────────────── */
  --space-4: 4px;  --space-6: 6px;  --space-8: 8px;  --space-10: 10px; --space-12: 12px;
  --space-14: 14px; --space-16: 16px; --space-18: 18px; --space-20: 20px; --space-24: 24px;
  --space-32: 32px; --space-48: 48px; --space-64: 64px;

  /* ── Shape and depth: from the mockup ────────────────────────────────── */
  --r-s: 10px;   /* inputs, small wells */
  --r-m: 16px;   /* cards, legs */
  --r-l: 24px;   /* tiles, panels */
  --r-btn: 12px;
  --r-odds: 10px;
  --r-el: 8px;   /* element tile */
  --r-pill: 999px;
  --radius-sm: var(--r-s); --radius-md: var(--r-m); --radius-lg: var(--r-l);
  --shadow-1: 0 1px 2px rgba(14, 28, 39, .06), 0 1px 1px rgba(14, 28, 39, .04);
  --shadow-2: 0 1px 2px rgba(14, 28, 39, .06), 0 18px 40px -18px rgba(14, 28, 39, .28);
  --shadow-3: 0 30px 80px -20px rgba(14, 28, 39, .45);   /* floating slip / dialogs */
  --shadow-card: var(--shadow-1);

  /* ── Container: from the mockup ──────────────────────────────────────── */
  --container: 1560px;
  --container-pad: 16px;
  --slip-w: 340px;
  --header-h: 64px;            /* pill height; sticky offset of panels = 96 */
  --sticky-top: 96px;
  --tabbar-h: 64px;

  /* ── Motion: from the mockup ─────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.5, 0, .8, .3);
  --t: 160ms;  --t2: 260ms;
  --dur-fast: var(--t); --dur-base: 200ms; --dur-slow: var(--t2);

  /* ── Layers (added) ──────────────────────────────────────────────────── */
  --z-tabbar: 45;
  --z-header: 50;
  --z-slip: 70;
  --z-overlay: 80;
  --z-modal: 90;
  --z-toast: 100;
}

/* Breakpoints (constants — media queries cannot read custom properties):
   390 mobile reference · 768 tablet · 1024 laptop · 1100 full header search ·
   1280 slip becomes a column (ТЗ §6.1) · 1440 desktop reference. */