/* Design tokens — the numbers of the approved mockup, named by role.
 *
 * Source: mockups/jcpelotas.co/a-painel-da-tablada.html (A — Painel da Tablada,
 * Dark Tech сдержанный), approved 2026-09-25. Mockup values moved as they are;
 * everything the mockup does not define is marked «добавлено».
 *
 * Two ink systems: the page is graphite (dark), data sections are light.
 * Text colours come in pairs — "on dark" and "on light" — because the mockup's
 * muted #93A3A0 and lagoa #4FB3A9 fail AA on #F4F6F5 (see S3 report).
 */
:root {
  /* ── Colour: surfaces (mockup) ───────────────────────────────────────── */
  --color-bg: #0E1315;              /* page, header, footer — graphite */
  --color-surface: #172024;         /* raised dark: race-day strip, cards, dropdown */
  --color-surface-2: #1D292E;       /* hover on dark surfaces */
  --color-surface-light: #F4F6F5;   /* light data sections */
  --color-surface-white: #FFFFFF;   /* tables and cards on light */

  /* ── Colour: ink (mockup) ────────────────────────────────────────────── */
  --color-text: #E9EEEC;            /* ink on dark */
  --color-muted: #93A3A0;           /* muted on dark only */
  --color-ink: #0E1315;             /* ink on light */
  --color-muted-light: #4E5C58;     /* muted on light, AA */

  /* ── Colour: roles (mockup) ──────────────────────────────────────────── */
  --color-brand: #FF6B35;           /* laranja Laranjal: CTA, active, lane rule */
  --color-on-brand: #0E1315;        /* dark text on orange — 6.7:1 */
  --color-brand-hover: #FF8458;
  --color-data: #4FB3A9;            /* lagoa: status, kickers on dark */
  --color-data-light: #1F6F67;      /* lagoa as text on light, AA */

  /* ── Colour: lines (mockup) ──────────────────────────────────────────── */
  --line-dark: rgba(233, 238, 236, .14);
  --line-dark-strong: rgba(233, 238, 236, .32);
  --line-light: rgba(14, 19, 21, .14);
  --line-light-strong: rgba(14, 19, 21, .4);
  --color-border: var(--line-dark);          /* template alias */

  /* ── Colour: states (добавлено) ──────────────────────────────────────── */
  --color-brand-active: color-mix(in srgb, var(--color-brand) 88%, black);
  --color-ink-hover: #26343A;                /* .btn--ink hover — from mockup */
  --color-row-hover: #FAFBFA;                /* table row hover on white — from mockup */
  --color-error: #FF8A73;                    /* error on dark, 7.4:1 on --color-bg */
  --color-error-light: #B3261E;              /* error on light */
  --color-success: var(--color-data);
  --color-success-light: var(--color-data-light);
  --color-disabled: color-mix(in srgb, var(--color-text) 38%, var(--color-bg));
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-brand) 55%, transparent);
  --shadow-pop: 0 18px 40px rgba(0, 0, 0, .35);   /* dropdown — from mockup */

  /* ── Typography (mockup) ─────────────────────────────────────────────── */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;
  --stretch-display: 72%;           /* h1 70%, h2/brand 72%, cards 80–85% */
  --fs-h1: clamp(3rem, 1.2rem + 6.4vw, 6.5rem);
  --fs-h2: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  --fs-h3: clamp(1.375rem, 1.1rem + .8vw, 1.75rem);
  --fs-lane: clamp(1.375rem, 1.05rem + .9vw, 1.875rem);
  --fs-stat: clamp(2.5rem, 1.6rem + 2.4vw, 3.75rem);
  --fs-lead: clamp(1.25rem, 1rem + .9vw, 1.75rem);
  --fs-body: 1.0625rem;             /* 17px */
  --fs-small: .9375rem;             /* 15px */
  --fs-label: .8125rem;             /* 13px — mono labels */
  --fs-micro: .75rem;               /* 12px — table heads, captions; floor */
  --lh-tight: .95;
  --lh-snug: 1.2;
  --lh-base: 1.55;

  /* ── Space (mockup 8px scale, renamed by value in px) ─────────────────── */
  --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-pad: clamp(56px, 7vw, 104px);

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --radius-sm: 2px;                 /* the mockup has one radius: 2px */
  --radius-md: 2px;
  --radius-lg: 2px;
  --box: 56px;                      /* gate box — signature */
  --tap: 44px;

  /* ── Container (mockup) ──────────────────────────────────────────────── */
  --container: 1280px;
  --container-pad: clamp(16px, 3vw, 40px);
  --header-h: 68px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .7, .2, 1);       /* mockup */
  --dur-fast: 150ms;                          /* mockup: .15s colour/border */
  --dur-base: 200ms;                          /* mockup: .2s icons, rows */
  --dur-slow: 350ms;                          /* mockup: .35s lane rule */
  --ease-in: cubic-bezier(.5, 0, .8, .3);     /* добавлено */

  /* ── Layers (добавлено) ──────────────────────────────────────────────── */
  --z-header: 50;
  --z-dropdown: 60;
  --z-overlay: 900;
  --z-modal: 1000;
}

@media (max-width: 600px) {
  :root { --header-h: 64px; }
}

/* Breakpoints cannot be custom properties in media queries. Mockup widths:
   --bp-nav: 1180px (burger)   --bp-lanes: 1100px (hero lanes/stat grid 2×2)
   --bp-cards: 860px (tables → cards, one column)   --bp-mobile: 600px
   kit.config.json → breakpoints: desktop 1440, mobile 390. */