/* Helio design system v2: tokens.
   One attribute swaps the theme: <html data-theme="dark"> («Вечер», default) or data-theme="light".
   Components read only the semantic names below, never raw colours.
   Contrast of every text pair is measured live on /design-system.html (WCAG 2.2 AA). */

@import url("fonts/fonts.css");

:root {
  /* ---------- type ---------- */
  --font-voice: "Lora", "Iowan Old Style", Georgia, serif;
  --font-ui: "Commissioner", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* The width of "0" in the site faces, as a length. Text measures are counted in these and never in `ch`:
     `ch` is read from whichever font stands in at that moment, so a measure moved when a file arrived late
     (765 px with Commissioner, 730 with the system font, 590 while the file was still loading). */
  --ch-ui: .65258em;      /* Commissioner 400 */
  --ch-ui-300: .64926em;  /* Commissioner 300, the weight of .lead */
  --ch-voice: .597em;     /* Lora italic 400 */

  --t-display: clamp(42px, 2.6vw + 30px, 76px);
  --t-h1: clamp(38px, 1.9vw + 29px, 60px);
  --t-h2: clamp(31px, 1.3vw + 25px, 46px);
  --t-h3: clamp(18px, .2vw + 17px, 20px);
  --t-lead: clamp(18px, .3vw + 16.5px, 21px);
  --t-body: 16px;
  --t-small: 14px;
  --t-eyebrow: 12px;
  --t-figure-xl: clamp(40px, 2.2vw + 31px, 64px);
  --t-figure-l: clamp(28px, 1vw + 24px, 38px);

  /* ---------- space (4 px base) ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 176px;
  --section: clamp(96px, 7vw + 70px, 176px);
  --gutter: clamp(20px, 3.4vw + 7px, 56px);
  --container: 1240px;

  /* ---------- shape ---------- */
  --r-xs: 8px; --r-s: 12px; --r-m: 16px; --r-l: 24px; --r-pill: 999px;
  --hair: 1px;

  /* ---------- motion ---------- */
  --d-fast: 140ms; --d-mid: 240ms; --d-slow: 520ms;
  --ease-in: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.4, 0, 1, 1);
}

/* ---------- «Вечер»: warm evening ground, candle accent ---------- */
:root, [data-theme="dark"] {
  --bg: oklch(0.245 0.028 45);
  --bg-sunken: oklch(0.215 0.024 45);
  --surface: oklch(0.275 0.032 45);
  --surface-2: oklch(0.305 0.034 46);
  --surface-3: oklch(0.335 0.036 48);
  --line-soft: oklch(0.295 0.028 45);
  --line: oklch(0.345 0.03 46);
  --line-strong: oklch(0.42 0.032 50);
  --edge-control: oklch(0.585 0.035 60);

  --text: oklch(0.945 0.016 78);
  --text-2: oklch(0.815 0.024 72);
  --text-3: oklch(0.72 0.028 66);

  --accent: oklch(0.84 0.125 78);
  --accent-hover: oklch(0.885 0.11 82);
  --accent-ink: oklch(0.87 0.105 80);
  --accent-bg: oklch(0.335 0.052 62);
  --accent-line: oklch(0.62 0.10 70);
  --on-accent: oklch(0.235 0.03 45);

  --neg: oklch(0.80 0.10 34);
  --neg-bg: oklch(0.32 0.05 34);
  --pos: oklch(0.87 0.09 105);
  --pos-bg: oklch(0.33 0.045 105);

  --focus: oklch(0.86 0.13 80);
  --scrim: oklch(0.12 0.02 45 / .62);
  --shadow-float: 0 1px 0 oklch(1 0 0 / .04) inset, 0 24px 60px -20px oklch(0.10 0.02 45 / .75), 0 2px 8px oklch(0.10 0.02 45 / .35);
  --shadow-frame: 0 1px 0 oklch(1 0 0 / .05) inset, 0 40px 120px -40px oklch(0.08 0.02 45 / .9), 0 0 0 1px oklch(0.36 0.03 48);
  --glow: oklch(0.84 0.125 78 / .10);

  /* charts: fixed warm categorical palette, one colour per category key */
  --c1: oklch(0.79 0.115 36);
  --c2: oklch(0.84 0.125 78);
  --c3: oklch(0.71 0.11 18);
  --c4: oklch(0.79 0.10 112);
  --c5: oklch(0.70 0.085 56);
  --c6: oklch(0.88 0.06 92);
  --c7: oklch(0.67 0.10 355);
  --c8: oklch(0.75 0.07 155);
  --c9: oklch(0.63 0.09 64);
  --c10: oklch(0.83 0.075 48);
  --c11: oklch(0.69 0.065 310);
  --c12: oklch(0.72 0.065 225);
  --c13: oklch(0.74 0.06 185);
  --c14: oklch(0.80 0.045 75);
  --c15: oklch(0.66 0.11 28);
  --c16: oklch(0.76 0.065 340);
  --c17: oklch(0.83 0.09 62);
  --c-rest: oklch(0.62 0.022 60);
  --flow-in: oklch(0.84 0.125 78 / .30);
  --flow-out: oklch(0.79 0.115 36 / .26);
  --flow-left: oklch(0.87 0.09 105 / .30);
  --bar-in: oklch(0.80 0.11 76);
  --bar-out: oklch(0.74 0.10 36);

  color-scheme: dark;
}

/* ---------- light: warm white ground, same accents, darker inks ---------- */
[data-theme="light"] {
  --bg: oklch(0.978 0.011 82);
  --bg-sunken: oklch(0.955 0.015 78);
  --surface: oklch(0.993 0.006 85);
  --surface-2: oklch(0.955 0.016 78);
  --surface-3: oklch(0.925 0.021 75);
  --line-soft: oklch(0.925 0.014 76);
  --line: oklch(0.885 0.018 72);
  --line-strong: oklch(0.80 0.024 68);
  --edge-control: oklch(0.60 0.035 60);

  --text: oklch(0.255 0.03 45);
  --text-2: oklch(0.41 0.032 50);
  --text-3: oklch(0.49 0.032 56);

  --accent: oklch(0.80 0.13 74);
  --accent-hover: oklch(0.76 0.135 70);
  --accent-ink: oklch(0.49 0.11 55);
  --accent-bg: oklch(0.935 0.048 80);
  --accent-line: oklch(0.70 0.12 68);
  --on-accent: oklch(0.235 0.03 45);

  --neg: oklch(0.52 0.135 34);
  --neg-bg: oklch(0.94 0.035 40);
  --pos: oklch(0.47 0.10 128);
  --pos-bg: oklch(0.94 0.04 120);

  --focus: oklch(0.52 0.12 58);
  --scrim: oklch(0.25 0.03 45 / .38);
  --shadow-float: 0 1px 0 oklch(1 0 0 / .7) inset, 0 24px 60px -24px oklch(0.35 0.04 50 / .32), 0 2px 6px oklch(0.35 0.04 50 / .10);
  --shadow-frame: 0 40px 100px -44px oklch(0.35 0.05 50 / .42), 0 2px 10px oklch(0.35 0.04 50 / .06), 0 0 0 1px oklch(0.87 0.02 72);
  --glow: oklch(0.80 0.13 74 / .16);

  --c1: oklch(0.64 0.135 36);
  --c2: oklch(0.66 0.13 68);
  --c3: oklch(0.55 0.13 18);
  --c4: oklch(0.62 0.10 118);
  --c5: oklch(0.58 0.085 56);
  --c6: oklch(0.65 0.09 98);
  --c7: oklch(0.52 0.12 355);
  --c8: oklch(0.60 0.075 155);
  --c9: oklch(0.47 0.075 60);
  --c10: oklch(0.66 0.10 50);
  --c11: oklch(0.54 0.07 310);
  --c12: oklch(0.56 0.075 228);
  --c13: oklch(0.58 0.07 185);
  --c14: oklch(0.62 0.05 75);
  --c15: oklch(0.52 0.12 28);
  --c16: oklch(0.60 0.08 340);
  --c17: oklch(0.64 0.11 62);
  --c-rest: oklch(0.61 0.02 62);
  --flow-in: oklch(0.76 0.135 72 / .34);
  --flow-out: oklch(0.64 0.135 36 / .22);
  --flow-left: oklch(0.62 0.10 118 / .30);
  --bar-in: oklch(0.72 0.13 70);
  --bar-out: oklch(0.63 0.12 36);

  color-scheme: light;
}