/* Drakly design tokens. Loaded first; every other stylesheet reads these.
   Colours are the values the game already used (ui-kit.css, style-v2.css, production.css),
   gathered under one name each. Old variable names stay as aliases in their files. */
:root {
  color-scheme: dark;

  /* Surfaces, deepest to brightest. */
  --c-bg: #061729;
  --c-surface-1: #0a273f;
  --c-surface-2: #102d45;
  --c-surface-3: #123a55;
  --c-surface-4: #204863;
  --c-line: #7ebbc8;
  --c-line-2: #568eaa;

  /* Text. */
  --c-text: #e9f8fb;
  --c-text-2: #c6dce4;
  --c-text-3: #aacbd7;
  --c-heading: #fff0cf;

  /* Accents and resources. */
  --c-gold: #ffe0a0;
  --c-gold-2: #efba61;
  --c-gold-ink: #3b2a13;
  --c-aqua: #87f5dd;
  --c-credits: #ffe0a0;
  --c-biomass: #91f3ea;
  --c-score: #abe7ff;
  --c-dragons: #c7b6ff;
  /* F17: the Early bird frame, a dawn gradient (rose, coral, sunrise gold). */
  --c-dawn-1: #ffb3c7;
  --c-dawn-2: #ff8a6b;
  --c-dawn-3: #ffd27a;

  /* Status. */
  --c-success: #7fd6a4;
  --c-danger: #ef9b90;
  --c-warning: #ffcf8a;
  --c-focus: #9bf3ff;

  /* Spacing (4 px grid). */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Radii. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Type scale. 11 px is the floor for running text; 10 px only for uppercase overlines. */
  --fs-overline: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --font-ui: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, Roboto, sans-serif;
  --font-display: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  /* Old-style figures in Georgia make 0 read as "o": numbers always use lining tabular figures. */
  --num: lining-nums tabular-nums;

  /* Layers. Local stacking inside a component keeps small numbers (1-10). */
  --z-world: 0;
  --z-hud: 20;
  --z-nav: 30;
  --z-sheet: 50;
  --z-toast: 60;
  --z-dialog: 70;
  --z-boot: 90;

  /* Safe areas: device notch on the web and PWA, Telegram's own controls in the Mini App.
     The --tg-* variables exist only inside Telegram; elsewhere they fall back to 0. */
  --safe-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  /* Resource HUD: 8 px gap above + up to 52 px tiles. Fixed elements under it start from here. */
  --hud-h: 60px;
  /* Bottom navigation height without the safe area. */
  --nav-h: 76px;

  /* Focus: one ring for every control. */
  --focus-ring: 2px solid var(--c-focus);

  /* Motion. Short, decelerating; nothing waits on an animation. */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 400ms;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
}