/* Design tokens of the library notebook: fonts, colors for light and dark themes, type scale, spacing and layout sizes. Components read only these variables. */

@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-italic-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Layout: a reading desk in three zones — index tabs A–Z on the left, the reading column, the margin rail ("поля") on the right. */
:root {
  /* type: serif for reading and titles, sans for interface, numbers and charts */
  --font-read: "Literata", "Source Serif 4", "PT Serif", Georgia, "Times New Roman", serif;
  --font-ui: "Golos Text", "Segoe UI", "Helvetica Neue", Roboto, Arial, system-ui, sans-serif;
  --font-code: ui-monospace, "SF Mono", "JetBrains Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;

  --t-hero: clamp(2.25rem, 1.55rem + 2.4vw, 3.25rem);
  --t-h1: clamp(1.875rem, 1.45rem + 1.4vw, 2.5rem);
  --t-h2: 1.5rem;
  --t-h3: 1.1875rem;
  --t-body: 1.125rem;
  --t-ui: 0.9375rem;
  --t-sm: 0.8125rem;
  --t-xs: 0.75rem;
  --t-kpi: 2rem;
  --lh-read: 1.65;
  --lh-ui: 1.5;
  --lh-tight: 1.15;

  /* spacing on a 4px grid */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* layout sizes */
  --side-w: 17rem;
  --top-h: 3.5rem;
  --read-w: 42rem;
  --rail-w: 14.5rem;
  --desk-gap: 3rem;
  --wide-w: calc(var(--read-w) + var(--desk-gap) + var(--rail-w));
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));

  /* color, light: warm-neutral paper, ink-blue accent */
  --bg: #f8f8f6;
  --bg-side: #f1f1ed;
  --surface: #fdfdfc;
  --sunken: #f0efeb;
  --ink: #1c1b19;
  --ink-2: #4f4e4a;
  --ink-3: #6b6963;
  --ink-4: #a3a19a;
  --rule: #e4e3dd;
  --rule-2: #cfcdc5;
  --hover: rgba(28, 27, 25, 0.045);
  --active: rgba(28, 27, 25, 0.075);
  --ring: rgba(28, 27, 25, 0.1);
  --accent: #256abf;
  --accent-ink: #1c5cab;
  --accent-wash: rgba(42, 120, 214, 0.1);
  --focus: rgba(42, 120, 214, 0.45);
  --mark: rgba(237, 161, 0, 0.26);
  --shadow-pop: 0 0 0 1px rgba(28, 27, 25, 0.06), 0 18px 40px -12px rgba(28, 27, 25, 0.24);
  --shadow-card: 0 1px 2px rgba(28, 27, 25, 0.04);

  /* chart series: dataviz reference palette, validated on --surface (Яндекс = 1, Google = 2) */
  --c1: #2a78d6;
  --c2: #eb6834;
  --c3: #1baf7a;
  --c4: #eda100;
  --c-other: #bdbbb3;
  --c1-wash: rgba(42, 120, 214, 0.1);
  --c2-wash: rgba(235, 104, 52, 0.1);
  --seq-1: #184f95;
  --seq-2: #2a78d6;
  --seq-3: #6da7ec;
  --grid: #ebeae4;
  --axis: #c3c2b7;
  --tick: #75736d;

  /* fact-check labels: fill for marks, ink for text on the wash, wash for chips */
  --ok: #0ca30c;
  --ok-ink: #0b6b0b;
  --ok-wash: rgba(12, 163, 12, 0.11);
  --part: #fab219;
  --part-ink: #7a5100;
  --part-wash: rgba(250, 178, 25, 0.2);
  --no: #d03b3b;
  --no-ink: #a52828;
  --no-wash: rgba(208, 59, 59, 0.1);
  --unk: #a5a39b;
  --unk-ink: #55534d;
  --unk-wash: rgba(137, 135, 129, 0.15);
  --op: #6250d6;
  --op-ink: #4a3cb0;
  --op-wash: rgba(98, 80, 214, 0.1);
  --own: #2a78d6;
  --own-ink: #1c5cab;
  --own-wash: rgba(42, 120, 214, 0.1);
  --good-ink: #0b6b0b;
  --bad-ink: #a52828;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151514;
    --bg-side: #111110;
    --surface: #1c1c1a;
    --sunken: #242422;
    --ink: #edece7;
    --ink-2: #c4c3ba;
    --ink-3: #9d9b92;
    --ink-4: #6b6963;
    --rule: #2c2c29;
    --rule-2: #3d3d39;
    --hover: rgba(255, 255, 255, 0.05);
    --active: rgba(255, 255, 255, 0.085);
    --ring: rgba(255, 255, 255, 0.08);
    --accent: #6da7ec;
    --accent-ink: #8dbcf2;
    --accent-wash: rgba(57, 135, 229, 0.17);
    --focus: rgba(109, 167, 236, 0.5);
    --mark: rgba(237, 161, 0, 0.3);
    --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 20px 48px -12px rgba(0, 0, 0, 0.7);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
    --c1: #3987e5;
    --c2: #d95926;
    --c3: #199e70;
    --c4: #c98500;
    --c-other: #55544f;
    --c1-wash: rgba(57, 135, 229, 0.16);
    --c2-wash: rgba(217, 89, 38, 0.16);
    --seq-1: #86b6ef;
    --seq-2: #3987e5;
    --seq-3: #1c5cab;
    --grid: #282826;
    --axis: #3d3d39;
    --tick: #97958c;
    --ok: #0ca30c;
    --ok-ink: #72d672;
    --ok-wash: rgba(12, 163, 12, 0.2);
    --part: #fab219;
    --part-ink: #f4c55c;
    --part-wash: rgba(250, 178, 25, 0.16);
    --no: #d03b3b;
    --no-ink: #f08a8a;
    --no-wash: rgba(208, 59, 59, 0.2);
    --unk: #75736c;
    --unk-ink: #c2c0b7;
    --unk-wash: rgba(160, 158, 150, 0.16);
    --op: #9085e9;
    --op-ink: #b5adf3;
    --op-wash: rgba(144, 133, 233, 0.17);
    --own: #3987e5;
    --own-ink: #8dbcf2;
    --own-wash: rgba(57, 135, 229, 0.18);
    --good-ink: #72d672;
    --bad-ink: #f08a8a;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #151514;
  --bg-side: #111110;
  --surface: #1c1c1a;
  --sunken: #242422;
  --ink: #edece7;
  --ink-2: #c4c3ba;
  --ink-3: #9d9b92;
  --ink-4: #6b6963;
  --rule: #2c2c29;
  --rule-2: #3d3d39;
  --hover: rgba(255, 255, 255, 0.05);
  --active: rgba(255, 255, 255, 0.085);
  --ring: rgba(255, 255, 255, 0.08);
  --accent: #6da7ec;
  --accent-ink: #8dbcf2;
  --accent-wash: rgba(57, 135, 229, 0.17);
  --focus: rgba(109, 167, 236, 0.5);
  --mark: rgba(237, 161, 0, 0.3);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 20px 48px -12px rgba(0, 0, 0, 0.7);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --c1: #3987e5;
  --c2: #d95926;
  --c3: #199e70;
  --c4: #c98500;
  --c-other: #55544f;
  --c1-wash: rgba(57, 135, 229, 0.16);
  --c2-wash: rgba(217, 89, 38, 0.16);
  --seq-1: #86b6ef;
  --seq-2: #3987e5;
  --seq-3: #1c5cab;
  --grid: #282826;
  --axis: #3d3d39;
  --tick: #97958c;
  --ok: #0ca30c;
  --ok-ink: #72d672;
  --ok-wash: rgba(12, 163, 12, 0.2);
  --part: #fab219;
  --part-ink: #f4c55c;
  --part-wash: rgba(250, 178, 25, 0.16);
  --no: #d03b3b;
  --no-ink: #f08a8a;
  --no-wash: rgba(208, 59, 59, 0.2);
  --unk: #75736c;
  --unk-ink: #c2c0b7;
  --unk-wash: rgba(160, 158, 150, 0.16);
  --op: #9085e9;
  --op-ink: #b5adf3;
  --op-wash: rgba(144, 133, 233, 0.17);
  --own: #3987e5;
  --own-ink: #8dbcf2;
  --own-wash: rgba(57, 135, 229, 0.18);
  --good-ink: #72d672;
  --bad-ink: #f08a8a;
  color-scheme: dark;
}