/* L2OKO - «Снежная ночь». Design tokens.
   Copy of design/tokens.css (source of truth: design/DESIGN_SYSTEM.md). Edit both together.
   Fonts (one link, Cyrillic included):
   https://fonts.googleapis.com/css2?family=Alegreya+SC:wght@700;800&family=Cinzel:wght@700;900&family=Golos+Text:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap
*/

:root {
  color-scheme: dark;

  /* ---------- night: page background, top to bottom ---------- */
  --night-0: #050a16;   /* very top, behind the header and the starry sky */
  --night-1: #0b1222;   /* page base; the bottom of every hero picture fades into it */
  --night-2: #0f1b2f;   /* middle of long pages */
  --night-3: #132538;   /* bottom of the page, where the snow picture starts */
  --steel:   #2d4b62;   /* strong lines, scrollbar, edge of focused panels */
  --steel-2: #7fa6c6;   /* cold secondary accent: icons, links in admin, hover edges */
  --snow:    #e8eef5;   /* snow; used only in art and in the ink-on-snow variant */

  /* ---------- surfaces ---------- */
  --panel:       rgba(13, 26, 46, .86);  /* glass panel; solid equivalent below */
  --panel-solid: #0e1b2f;                /* same panel without transparency (admin, no-backdrop browsers) */
  --panel-head:  linear-gradient(180deg, #17304d 0%, #112540 100%);
  --row:         #122239;
  --row-alt:     #10203a;
  --row-hover:   #183050;
  --plate:       #08111f;                /* date plate, counter square, input field */
  --overlay:     rgba(3, 7, 15, .72);    /* dialogs, mobile menu */

  /* ---------- lines and panel edges ---------- */
  --line:        rgba(127, 166, 198, .16);  /* row separators */
  --line-2:      rgba(127, 166, 198, .28);  /* chip and input borders */
  --edge:        rgba(140, 186, 230, .34);  /* panel edge (the «cold rim») */
  --edge-hi:     rgba(190, 220, 255, .55);  /* top edge of a panel, hover edge */
  --rim-glow:    0 0 0 1px rgba(110, 165, 220, .10), 0 0 16px rgba(80, 150, 230, .10); /* soft, never neon */
  --inner-hi:    inset 0 1px 0 rgba(190, 220, 255, .10); /* the very light inner highlight */

  /* ---------- text ---------- */
  --text:   #eef3fa;  /* main text, names in rows */
  --text-2: #b3c2d5;  /* chronicles, descriptions, labels */
  --text-3: #8ea2ba;  /* hints, counters inside chips; never smaller than 12px */
  --ink:    #1a1206;  /* dark text on bright gold (only the «Топ-место» chip on art) */

  /* ---------- warm accent: the only warm colour ---------- */
  --fire:       #ff9d45;  /* orange text and icons on dark: crowns, countdown, active underline */
  --fire-edge:  #ffb469;  /* 1px top edge of orange buttons and rows */
  --fire-fill:  #b8530a;  /* colour under the label of orange buttons and ТОП rows (white = 4.9:1) */
  --fire-grad:  linear-gradient(180deg, #d27018 0%, #b8530a 30%, #9f4706 100%);   /* the label sits on 30-70%: never lighter than fire-fill */
  --fire-grad-hover: linear-gradient(180deg, #e2802a 0%, #b8530a 34%, #a64a08 100%); /* hover = brighter top edge + glow, same colour under the label */
  --fire-glow:  0 0 18px rgba(255, 140, 50, .28);

  /* ---------- gold: top place (divine) and names on banners ---------- */
  --gold:       #f2c85b;  /* gold text on dark: VIP badge, VIP name, top-place name */
  --gold-edge:  #f6d98a;
  --gold-fill:  #8a681c;  /* colour under the label of the gold row (white = 5.2:1) */
  --gold-grad:  linear-gradient(180deg, #a98126 0%, #8a681c 30%, #6f5214 100%);
  --gold-title: linear-gradient(180deg, #fff1c4 0%, #f2c85b 45%, #b8862e 100%); /* serif names on banners, background-clip:text */

  /* ---------- green: only «today» start time and «ИДЁТ» ---------- */
  --green:      #5fd38a;  /* green text on dark */
  --green-fill: #1c7f45;  /* plate fill (white = 5.0:1) */
  --green-edge: #4fc27c;

  /* ---------- service colours ---------- */
  --red:        #ff7a6b;  /* errors, «Отклонён» */
  --red-fill:   #a3352a;
  --info:       #8cc4ff;

  /* ---------- fonts ---------- */
  --f-ui:    "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;  /* caps: headings, nav, buttons, names in rows */
  --f-title: "Cinzel", "Alegreya SC", Georgia, serif;                   /* names on banners; Cyrillic falls back to Alegreya SC per glyph */
  --f-text:  "Golos Text", "Segoe UI", system-ui, sans-serif;           /* body text, chips, forms, tables */

  /* type scale: desktop / phone (<700px) is switched in the media query below */
  --fs-hero:   88px;  /* server name on the hero */
  --fs-h1:     30px;  /* inner page title */
  --fs-h2:     22px;  /* panel title */
  --fs-h3:     17px;
  --fs-nav:    16px;
  --fs-row:    15px;  /* name in a row */
  --fs-body:   15px;
  --fs-small:  13px;
  --fs-micro:  12px;  /* the smallest allowed size (chip counters, «Реклама») */
  --fs-clock:  30px;  /* countdown in the «today» head */
  --lh-tight:  1.15;
  --lh-body:   1.55;
  --track-caps: .04em;   /* letter-spacing for Oswald caps */
  --track-wide: .32em;   /* «LINEAGE 2 · HIGH FIVE», tagline under the hero name */

  /* ---------- spacing and grid ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;  --s-12: 48px;
  --wrap:    1260px;   /* content width; kept from the current site so ad texts (1260 px) stay true */
  --gutter:  24px;     /* side padding of the page, 16px on phones */
  --rail:    300px;    /* right column = exact width of the 300×400 banner */
  --gap:     16px;     /* between panels */
  --row-h:   44px;     /* list row; 52px on phones (two lines) */
  --hdr-h:   72px;
  --hero-h:  480px;    /* hero box incl. the header that floats over it */
  --scene-h: 900px;    /* the hero picture runs on under the panels and fades out */

  /* ---------- radius, shadow ---------- */
  --r-1: 4px;    /* chips, plates, inputs */
  --r-2: 6px;    /* buttons, rows */
  --r-3: 10px;   /* panels, cards */
  --shadow-panel: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-pop:   0 16px 40px rgba(0, 0, 0, .55);

  /* ---------- motion ---------- */
  --ease:     cubic-bezier(.2, .7, .2, 1);
  --t-fast:   .12s;  /* hover */
  --t-med:    .2s;   /* filters, tabs */
  --t-slow:   .6s;   /* hero cross-fade */
  --hero-every: 8s;  /* top-place rotation */
}

@media (max-width: 699px) {
  :root {
    --fs-hero:  46px;
    --fs-h1:    24px;
    --fs-h2:    18px;
    --fs-row:   14px;
    --fs-clock: 22px;
    --gutter:   16px;
    --row-h:    52px;
    --hdr-h:    100px;  /* two rows: logo + tools, then the four sections */
    --hero-h:   470px;
    --scene-h:  640px;
  }
}

/* ---------- ready-made panel skin (used by .panel in preview and by .frame in the reskin) ---------- */
.ds-panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-top-color: var(--edge-hi);
  border-radius: var(--r-3);
  box-shadow: var(--inner-hi), var(--rim-glow), var(--shadow-panel);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ds-panel { background: var(--panel-solid); }
}

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