/* Design tokens — from the approved mockup C "Sun Dial"
 * (__SITE_KIT/mockups/casinodays.co/c-sun-dial.html, 2026-11-05).
 * Palette and fonts are fixed by ТЗ §2.1–2.2. Values marked "added" are not in the mockup.
 */
:root {
  /* ── Colour: from the mockup / ТЗ ────────────────────────────────────── */
  --color-bg: #121827;               /* ТЗ: основной фон */
  --color-bg-2: #202B3D;             /* ТЗ: вторичный фон */
  --surface-0: #0E1320;              /* added: field wells, deeper than bg */
  --surface-1: #182136;
  --surface-2: #202B3D;
  --surface-3: #2A3650;
  --color-brand: #F97316;            /* ТЗ: основной акцент, кнопки */
  --color-brand-hi: #FB8A3C;
  --color-brand-ink: #1A0D02;        /* added: text on orange — white on #F97316 is 2.8:1, this is 7.6:1 */
  --color-accent: #38BDF8;           /* ТЗ: дополнительный акцент */
  --color-accent-hi: #7DD3FC;
  --color-text: #FFFFFF;
  --color-muted: #BCC7D7;            /* ТЗ: вторичный текст */
  --color-faint: #93A1B5;            /* added: 5.6:1 on surface-1 */
  --color-border: #354257;           /* ТЗ: границы */
  --color-live: #EF4444;
  --line: rgba(188, 199, 215, .12);         /* mockup --hairline */
  --line-strong: rgba(188, 199, 215, .2);   /* mockup --hairline-strong */
  --glass: rgba(32, 43, 61, .72);

  /* ── Colour: added states ────────────────────────────────────────────── */
  --color-brand-hover: #FF8331;            /* mockup .btn-primary:hover */
  --color-brand-active: color-mix(in oklab, var(--color-brand) 86%, black);
  --color-error: #FF8A80;
  --color-success: #86EFAC;
  --tint-brand: rgba(249, 115, 22, .14);
  --tint-accent: rgba(56, 189, 248, .12);
  --tint-live: rgba(239, 68, 68, .14);
  --tint-ok: rgba(34, 197, 94, .1);
  --focus-ring: 0 0 0 3px rgba(56, 189, 248, .55);
  --sun-glow: 0 0 0 4px rgba(249, 115, 22, .16), 0 0 14px rgba(249, 115, 22, .55);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display: "Manrope", system-ui, sans-serif;   /* ТЗ: заголовки Manrope Bold */
  --font-body: "Inter", system-ui, sans-serif;        /* ТЗ: текст Inter, кнопки Inter SemiBold */
  --font-mono: "Inter", system-ui, sans-serif;        /* numbers use Inter tabular-nums, no third family */
  --fs-h1: clamp(40px, 4.6vw, 66px);
  --fs-h2: clamp(30px, 3.2vw, 46px);
  --fs-h3: 22px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 13px;
  --lh-tight: 1.04;
  --lh-base: 1.55;

  /* ── Space, shape, depth ─────────────────────────────────────────────── */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px;
  --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px;
  --section-y: clamp(64px, 8vw, 112px);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 0 rgba(255,255,255,.05) inset, 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.45);
  --shadow-pop: 0 1px 0 rgba(255,255,255,.07) inset, 0 2px 6px rgba(0,0,0,.28), 0 22px 48px -16px rgba(0,0,0,.6);

  /* ── Container ───────────────────────────────────────────────────────── */
  --container: 1240px;
  --container-pad: 24px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 700ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* ── Layers (added) ──────────────────────────────────────────────────── */
  --z-header: 100;
  --z-tabbar: 110;
  --z-overlay: 900;
  --z-toast: 950;
  --z-modal: 1000;
}
@media (max-width: 760px) { :root { --container-pad: 16px; } }

/* Breakpoints: 390 (mobile) · 760 · 1100 (capsule ↔ tab bar) · 1440 (desktop) */