/* Design tokens — the numbers from the mockup, named by role.
 *
 * Source: «лотто 21.fig», parsed 2026-09-16 (figma/INVENTORY.md, fig-tokens.js).
 * Rules:
 *   · names say the role (--color-surface), never the value (--color-1, --fs-48);
 *   · values are not rounded "for tidiness" — 22px from the mockup stays 22px;
 *   · anything the mockup does not have (states, focus ring, motion) is marked below.
 *
 * The mockup draws two near-identical darks on purpose: #181610 is ink (text,
 * strokes, dark buttons on light surfaces) and #171510 is the dark shell (page
 * frame, footer, dark cards). They are kept separate — pixel mode checks colour
 * to a distance of 2.
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #f3f0e4;          /* light page background (sections)            */
  --color-ink: #181610;         /* text and strokes on light surfaces          */
  --color-text: var(--color-ink);
  --color-dark: #171510;        /* dark shell: header strip, footer, dark cards */
  --color-dark-2: #24211a;      /* raised dark surface, dividers on dark        */
  --color-dark-3: #2a2720;      /* input fills on dark                          */
  --color-brand: #f6e9a7;       /* primary yellow: header, hero panel, accents  */
  --color-cream: #fff4c8;       /* light text on dark, light card fill          */
  --color-gold: #d9cc81;        /* stroke on yellow, gold labels                */
  --color-muted: #a39e93;       /* secondary text on dark (6.5:1 on #171510)    */
  --color-muted-2: #bcb9af;     /* tertiary text on dark                        */
  --color-muted-3: #85837a;     /* placeholders, meta on dark                   */
  --color-muted-ink: #5c564c;   /* secondary text on light (7.4:1 on #f6e9a7)   */
  --color-border-light: #e6dcba;
  --color-border-light-2: #d9d0c1;
  --color-white: #ffffff;
  --overlay-dark: rgba(23, 21, 16, .8);       /* modal backdrop                  */
  --tint-ink-25: rgba(24, 22, 16, .25);       /* dividers on yellow              */
  --tint-ink-50: rgba(24, 22, 16, .5);
  --tint-white-15: rgba(255, 255, 255, .149); /* hairlines on dark               */
  --tint-gold-50: rgba(217, 204, 129, .502);

  /* ── Colour: added by us (not in the mockup) ─────────────────────────── */
  --color-brand-hover: #f0dd85;                               /* yellow, darker step  */
  --color-brand-active: #e6d06c;
  --color-dark-hover: #2a2720;                                /* dark button hover    */
  --color-cream-hover: #ffe9a0;
  --color-error: #b3261e;
  --color-error-on-dark: #ff8a7a;
  --color-success: #146c2e;
  --color-success-on-dark: #8fd9a3;
  --focus-ring: 0 0 0 3px rgba(24, 22, 16, .35);
  --focus-ring-on-dark: 0 0 0 3px rgba(246, 233, 167, .55);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Display scale (Anton 400) — sizes exactly as drawn */
  --fs-display-xl: 96px;   /* hero on wide frames, footer wordmark (removed by TZ) */
  --fs-display-lg: 72px;   /* page-hero headings                                  */
  --fs-h1: 64px;           /* section headings on the home page                   */
  --fs-h1-sm: 56px;
  --fs-h2: 48px;
  --fs-h2-sm: 42px;
  --fs-h3: 40px;           /* card numerals                                       */
  --fs-h4: 32px;           /* brand wordmark, sub-headings                        */
  --fs-h5: 22px;           /* card titles                                         */
  /* Body scale (DM Sans) */
  --fs-lead: 16px;
  --fs-body: 15px;
  --fs-body-sm: 14px;      /* the most used size in the mockup                    */
  --fs-small: 13px;
  --fs-label: 12px;        /* eyebrows, utility strip, footer meta                */
  --fs-micro: 11px;
  --fs-tag: 10px;
  /* line-height goes in px per node, from the mockup — see F5-rules. These are
     only for text whose length is not fixed. */
  --lh-tight: 1;           /* display headings: 100% / +1px in the mockup         */
  --lh-base: 1.5;          /* paragraphs: +2px = 14/16px → ~1.14–1.5, see per node  */
  --tracking-label: .08em; /* eyebrows and buttons are tracked uppercase          */

  /* ── Space, shape, depth ─────────────────────────────────────────────── */
  --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-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --radius-xs: 4px;        /* tags, eyebrow chips                                 */
  --radius-sm: 6px;        /* odds buttons, inputs                                */
  --radius-md: 8px;        /* buttons                                             */
  --radius-lg: 12px;       /* list rows, small cards                              */
  --radius-xl: 16px;       /* cards                                               */
  --radius-2xl: 24px;      /* large cards, hero image                             */
  --radius-3xl: 28px;      /* hero panels                                         */
  --radius-pill: 99px;     /* filter pills                                        */
  --shadow-card: 0 16px 32px rgba(0, 0, 0, .251);
  --shadow-modal: 0 16px 32px rgba(0, 0, 0, .4);

  /* ── Container: from the mockup ──────────────────────────────────────── */
  --container: 1440px;
  --container-pad: 40px;   /* sections: pad 80/40                                 */
  --shell-pad: 64px;       /* header and footer: pad 0/64                         */
  --container-pad-m: 16px; /* mobile frames: pad 16                               */

  /* ── Motion (added by us) ────────────────────────────────────────────── */
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-in: cubic-bezier(.5, 0, .8, .3);

  /* ── Layers ──────────────────────────────────────────────────────────── */
  --z-header: 100;
  --z-slip: 200;
  --z-overlay: 900;
  --z-modal: 1000;
}

/* Breakpoints cannot be custom properties in media queries. The mockup widths
   live in kit.config.json; keep any change to these two in step with it.
   --bp-mobile: 390px  (mockup mobile frame; the mobile layout applies ≤1199px)
   --bp-desktop: 1440px (mockup desktop frame) */