/* Design tokens. Single source of truth: primitives -> semantic -> component.
   Every other stylesheet reads var(--...) from here and nothing else. */

:root {
  /* ---- primitives: neutrals (warm) ---- */
  --p-ink-950: #131917;
  --p-ink-900: #1e2624;
  --p-ink-700: #3d4845;
  --p-ink-600: #4d5a56;
  --p-sand-25: #fdfcf9;
  --p-sand-50: #fbf9f4;
  --p-sand-100: #f5f1e8;
  --p-sand-200: #ece6d8;
  --p-sand-300: #d9d2c0;
  --p-sand-500: #8a8470;

  /* ---- primitives: brand ---- */
  --p-petrol-300: #7cc3d2;
  --p-petrol-400: #5fb0c2;
  --p-petrol-500: #3d95aa;
  --p-petrol-700: #0e4b5a;
  --p-petrol-800: #0a3c49;
  --p-petrol-900: #073039;
  --p-amber-300: #f0c46b;
  --p-amber-400: #e3a63a;
  --p-amber-900: #2a1d05;
  --p-green-700: #1b5e3b;
  --p-green-800: #164d31;
  --p-green-300: #7fd0a2;
  --p-red-700: #8c1d2c;
  --p-red-800: #741824;
  --p-red-300: #f0a0aa;
  --p-white: #ffffff;

  /* ---- primitives: dark surfaces ---- */
  --p-night-900: #101615;
  --p-night-800: #172120;
  --p-night-700: #1f2c2a;
  --p-night-600: #2c3d3a;
  --p-night-100: #ece7db;
  --p-night-300: #b7bfba;

  /* ---- primitives: illustration palette (mascots, scenes) ---- */
  --art-sky: #cfe4e6;
  --art-sky-warm: #f3d9a8;
  --art-sun: #e8a63a;
  --art-ground: #c9b48a;
  --art-ground-dark: #a58f66;
  --art-wall: #e8dfcb;
  --art-wall-dark: #cbbfa5;
  --art-water: #4d9db3;
  --art-water-deep: #2e7a91;
  --art-ink: #1e2624;
  --art-skin-a: #e3b48a;
  --art-skin-b: #b9835a;
  --art-skin-c: #f0cba8;
  --art-hi-vis: #e3a63a;
  --art-warning: #c8452f;
  --art-cloth-a: #0e4b5a;
  --art-cloth-b: #8c1d2c;
  --art-cloth-c: #4d6b3f;
  --art-white: #fbf9f4;
  --art-berkut-dark: #4a3324;
  --art-berkut-mid: #6d4a33;
  --art-berkut-gold: #d9a44a;
  --art-beak: #e8b64a;
  --art-paper: #fcf9f1; /* фон картинок маскотов (assets/mascots) */
  --art-photo-filter: none; /* картинки маскотов; в тёмной теме приглушены */
  --art-irbis-grey: #b9c0c2;
  --art-irbis-light: #e6eaea;
  --art-irbis-dark: #3d4548;
  --art-irbis-eye: #9fd1b8;
  --art-nose: #c98c8c;

  /* ---- semantic: light theme (default) ---- */
  --color-surface-page: var(--p-sand-100);
  --color-surface-raised: var(--p-sand-50);
  --color-surface-sunken: var(--p-sand-200);
  --color-surface-header: var(--p-sand-100);
  --color-text-primary: var(--p-ink-900);
  --color-text-secondary: var(--p-ink-600);
  --color-border-subtle: var(--p-sand-300);
  --color-border-strong: var(--p-sand-500);
  --color-action-primary: var(--p-petrol-700);
  --color-action-primary-hover: var(--p-petrol-800);
  --color-action-primary-active: var(--p-petrol-900);
  --color-on-action: var(--p-sand-50);
  --color-accent: var(--p-amber-400);
  --color-accent-soft: var(--p-amber-300);
  --color-on-accent: var(--p-amber-900);
  --color-selected-bg: var(--p-sand-200);
  --color-selected-border: var(--p-petrol-700);
  --color-correct-bg: var(--p-green-700);
  --color-correct-hover: var(--p-green-800);
  --color-on-correct: var(--p-white);
  --color-wrong-bg: var(--p-red-700);
  --color-wrong-hover: var(--p-red-800);
  /* green / red as text on the page surface (admin statuses, history) */
  --color-correct-text: var(--p-green-700);
  --color-wrong-text: var(--p-red-700);
  --color-on-wrong: var(--p-white);
  --color-focus-ring: var(--p-petrol-700);
  --color-focus-gap: var(--p-sand-50);
  --color-stage: var(--p-ink-950);
  --color-stage-edge: var(--p-ink-900);
  --color-on-stage: var(--p-sand-100);
  --color-scrim: rgb(19 25 23 / 0.62);
  --color-veil-light: rgb(255 255 255 / 0.16);
  --color-veil-dark: rgb(0 0 0 / 0.24);
  --color-veil-accent: rgb(42 29 5 / 0.14);
  --color-link: var(--p-petrol-700);

  /* ---- video player: always on a dark picture, the same in both themes ---- */
  --player-fg: var(--p-white);
  --player-fg-soft: rgb(255 255 255 / 0.78);
  --player-shade: rgb(8 14 13 / 0.86);
  --player-shade-mid: rgb(8 14 13 / 0.42);
  --player-shade-none: rgb(8 14 13 / 0);
  --player-track: rgb(255 255 255 / 0.26);
  --player-buffer: rgb(255 255 255 / 0.48);
  --player-fill: var(--p-amber-400);
  --player-hover: rgb(255 255 255 / 0.16);
  --player-panel: rgb(14 22 21 / 0.94);
  --player-panel-line: rgb(255 255 255 / 0.14);
  --player-chip-on: var(--p-amber-400);
  --player-on-chip: var(--p-amber-900);
  --player-bar-h: 0.3125rem;
  --player-bar-h-hover: 0.5rem;
  --player-thumb: 0.875rem;
  --player-btn: 2.5rem;
  --player-big: 4.5rem;
  --player-spin: 900ms;
  --player-spin-slow: 3s;

  /* ---- spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --gutter: clamp(0.75rem, 2vw, 1.5rem);
  --measure: 65ch;
  --container: 92rem;

  /* ---- typography ---- */
  --font-sans: "Onest", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.3125rem;
  --text-2xl: 1.75rem;
  --text-display: clamp(1.75rem, 0.9rem + 1.9vw, 2.5rem);
  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --tracking-display: -0.025em;
  --tracking-label: 0.08em;

  /* ---- shape ---- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;
  --border-hairline: 1px;
  --border-strong: 2px;

  /* ---- elevation (restrained) ---- */
  --shadow-raised: 0 1px 2px rgb(30 38 36 / 0.06), 0 8px 24px -12px rgb(30 38 36 / 0.18);
  --shadow-overlay: 0 24px 64px -16px rgb(19 25 23 / 0.5);
  --shadow-focus-ring: 0 0 0 2px var(--color-focus-gap), 0 0 0 5px var(--color-focus-ring);

  /* ---- sizing ---- */
  --size-control: 2.5rem;
  --size-control-lg: 2.75rem;
  --size-icon: 1.25rem;
  --size-icon-lg: 1.5rem;
  --size-avatar-sm: 2rem;
  --size-header: 3.25rem;
  --size-navbar: 3.75rem;
  --opacity-disabled: 0.5;

  /* ---- misc ---- */
  --lift: -0.125rem;
  --ring-current: 0.1875rem;
  --bar-width: 0.1875rem;
  --stagger-step: 60ms;

  /* ---- motion ---- */
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-moderate: 300ms;
  --duration-slow: 500ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- layers ---- */
  --z-sticky: 20;
  --z-header: 30;
  --z-overlay: 60;
}

/* Dark theme: designed, not inverted. Surfaces lift lighter for elevation. */
:root[data-theme="dark"] {
  --color-surface-page: var(--p-night-900);
  --color-surface-raised: var(--p-night-800);
  --color-surface-sunken: var(--p-night-700);
  --color-surface-header: var(--p-night-900);
  --color-text-primary: var(--p-night-100);
  --color-text-secondary: var(--p-night-300);
  --color-border-subtle: var(--p-night-600);
  --color-border-strong: #7f8c87;
  --color-action-primary: var(--p-petrol-300);
  --color-action-primary-hover: var(--p-petrol-400);
  --color-action-primary-active: var(--p-petrol-500);
  --color-on-action: var(--p-ink-950);
  --color-accent: var(--p-amber-300);
  --color-accent-soft: var(--p-amber-400);
  --color-on-accent: var(--p-amber-900);
  --color-selected-bg: var(--p-night-700);
  --color-selected-border: var(--p-petrol-300);
  --color-correct-bg: #1d6a43;
  --color-correct-hover: #185a39;
  --color-wrong-bg: #8f2231;
  --color-wrong-hover: #7b1c29;
  --color-correct-text: var(--p-green-300);
  --color-wrong-text: var(--p-red-300);
  --color-focus-ring: var(--p-petrol-300);
  --color-focus-gap: var(--p-night-900);
  --color-stage: #0a0e0d;
  --color-stage-edge: #141b1a;
  --color-scrim: rgb(0 0 0 / 0.7);
  --color-link: var(--p-petrol-300);
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.6);
  --art-photo-filter: brightness(0.84) saturate(0.9);
}

/* Touch screens: bigger controls (44 px is the common minimum for a finger). */
@media (pointer: coarse) {
  :root {
    --size-control: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-moderate: 0ms;
    --duration-slow: 0ms;
  }
}