/* === 01-critical.css: Design tokens + CSS reset (combined for T23 CWV — max 2 blocking CSS) === */

/* — DESIGN TOKENS — */
/* ===========================================================
   01-TOKENS.CSS — design tokens. Загружается первым на каждой странице.
   Editorial Documentary aesthetic: deep navy + warm cream + verdict accents.
   =========================================================== */

:root {
  /* — colour palette — */
  --ink:           #0E1116;    /* primary text on light bg */
  --ink-dim:       #3A414B;    /* secondary text */
  --ink-muted:     #6B7280;    /* tertiary, captions */
  --paper:         #F5EFE4;    /* warm cream background */
  --paper-deep:    #EAE2D2;    /* deeper cream, alternating sections */
  --paper-flash:   #FBF7EF;    /* lightest cream, cards on cream */
  --ledger:        #FFFFFF;    /* white inset for stat blocks */
  --rule:          rgba(14, 17, 22, 0.12);    /* hairline dividers */
  --rule-strong:   rgba(14, 17, 22, 0.28);    /* prominent dividers */

  /* dark stage — for hero zones and casino dossier covers */
  --stage:         #11161F;    /* deep navy stage bg */
  --stage-2:       #1B232F;    /* stage variant */
  --stage-rim:     #2A3441;    /* stage borders */
  --stage-ink:     #F5EFE4;    /* text on stage */
  --stage-dim:     #B6BFCC;    /* secondary text on stage */

  /* verdict colours — used on rating chips, panel rails */
  --green:         #1EA571;
  --green-soft:    #D7F0E5;
  --yellow:        #E7B400;
  --yellow-soft:   #FBEDB8;
  --red:           #D33C2C;
  --red-soft:      #FBD9D4;

  /* accent — editorial flag colour, used sparingly */
  --flag:          #C8311F;    /* signature scarlet flag */
  --flag-deep:     #8C1F0F;
  --flag-soft:     #FBDED9;
  --gold:          #B6914C;    /* honor-roll accent */

  /* — typography stack — */
  --font-display: "Fraunces", "Newsreader", "Iowan Old Style", "Georgia", serif;
  --font-body:    "Newsreader", "Iowan Old Style", "Charter", "Georgia", serif;
  --font-sans:    "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", "Menlo", monospace;

  /* — type scale (modular, 1.25 ratio) — */
  --t-xxs:  0.6875rem;   /* 11px */
  --t-xs:   0.75rem;     /* 12px */
  --t-sm:   0.875rem;    /* 14px */
  --t-md:   1rem;        /* 16px */
  --t-lg:   1.125rem;    /* 18px */
  --t-xl:   1.375rem;    /* 22px */
  --t-2xl:  1.75rem;     /* 28px */
  --t-3xl:  2.25rem;     /* 36px */
  --t-4xl:  3rem;        /* 48px */
  --t-5xl:  4rem;        /* 64px */
  --t-6xl:  5.25rem;     /* 84px */
  --t-7xl:  7rem;        /* 112px */

  /* — spacing scale (4px base) — */
  --s-0:   0;
  --s-1:   0.25rem;
  --s-2:   0.5rem;
  --s-3:   0.75rem;
  --s-4:   1rem;
  --s-5:   1.5rem;
  --s-6:   2rem;
  --s-7:   3rem;
  --s-8:   4rem;
  --s-9:   6rem;
  --s-10:  8rem;
  --s-11:  12rem;

  /* — layout — */
  --max-narrow: 720px;
  --max-prose:  1040px;
  --max-wide:   1280px;
  --max-grand:  1600px;

  /* — radii (sparingly used; this site favors hard edges) — */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 16px;
  --r-round: 999px;

  /* — motion — */
  --ease:  cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 540ms;

  /* — z layers — */
  --z-base:    0;
  --z-content: 10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* light theme stays default for now; dark theme variants reserved for future */
  }
}


/* — CSS RESET — */
/* ===========================================================
   02-RESET.CSS — modern reset + sensible defaults.
   =========================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--flag);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Touch target floor: 24px per project rules */
a, button, .cta { min-height: 24px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}