/* СЛОЙ 1 — ТОКЕНЫ. Светлая тема является основной, тёмная переопределяет
   тот же семантический контракт. В остальных слоях нет логики темы. */

:root {
  color-scheme: light;

  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #edf2f7;
  --surface-3: #e2e9f2;
  --table-zebra: #edf2f7;
  --field: #ffffff;
  --sidebar: #f8fafc;
  --sidebar-end: #eef3f8;

  --line: #d8e0ea;
  --line-strong: #7f8fa3;
  --txt: #172235;
  --muted: #5d6b7d;

  --cyan-bg: #e2f5f6;
  --cyan-bg-2: #b9dde1;
  --cyan-line: #168591;
  --cyan-base: #006d78;
  --cyan-strong: #004f59;
  --blue-bg: #e8f0fe;
  --blue-bg-2: #d8e6fc;
  --blue-line: #4b78c2;
  --blue-base: #245ea8;
  --blue-strong: #16477f;
  --green-bg: #e4f4ec;
  --green-bg-2: #d3ebdf;
  --green-line: #31845c;
  --green-base: #1d704a;
  --green-strong: #135637;
  --amber-bg: #fff3d6;
  --amber-bg-2: #f9e7bd;
  --amber-line: #a46c08;
  --amber-base: #865500;
  --amber-strong: #674000;
  --red-bg: #fdebed;
  --red-bg-2: #f7d9dc;
  --red-line: #b94b55;
  --red-base: #a6323c;
  --red-strong: #7d2029;

  --r-xs: 5px;
  --r-ctl: 9px;
  --r-card: 14px;
  --r-lg: 18px;
  --r-pill: 999px;

  --t-xs: 11px;
  --t-sm: 12.5px;
  --t-base: 15px;
  --t-md: 17px;
  --t-lg: 20px;
  --t-xl: 27px;

  --elev-1: 0 1px 2px rgba(24, 38, 58, .06);
  --elev-2: 0 8px 24px rgba(24, 38, 58, .10);
  --elev-3: 0 18px 48px rgba(24, 38, 58, .16);

  --cyan: var(--cyan-base);
  --blue: var(--blue-base);
  --green: var(--green-base);
  --amber: var(--amber-base);
  --red: var(--red-base);
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #090d10;
  --surface: #11161a;
  --surface-2: #171d21;
  --surface-3: #20272c;
  --table-zebra: #1a2126;
  --field: #0c1114;
  --sidebar: #0b1013;
  --sidebar-end: #080c0e;

  --line: rgba(214, 220, 221, .14);
  --line-strong: rgba(214, 220, 221, .34);
  --txt: #f0f1ed;
  --muted: #9da5a6;

  --cyan-bg: #302b0f;
  --cyan-bg-2: #403814;
  --cyan-line: #b89612;
  --cyan-base: #f3c918;
  --cyan-strong: #ffdc3d;
  --blue-bg: #302b0f;
  --blue-bg-2: #403814;
  --blue-line: #b89612;
  --blue-base: #f3c918;
  --blue-strong: #ffdc3d;
  --green-bg: #142c39;
  --green-bg-2: #163b41;
  --green-line: #279072;
  --green-base: #34d399;
  --green-strong: #7be2bd;
  --amber-bg: #282a2d;
  --amber-bg-2: #3a382c;
  --amber-line: #9d7d28;
  --amber-base: #fbbf24;
  --amber-strong: #fcd571;
  --red-bg: #272335;
  --red-bg-2: #3a2a3a;
  --red-line: #bc5a60;
  --red-base: #f87171;
  --red-strong: #faa3a3;

  --elev-1: 0 1px 0 rgba(255, 255, 255, .04) inset;
  --elev-2: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 8px 24px rgba(0, 0, 0, .35);
  --elev-3: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 16px 48px rgba(0, 0, 0, .5);
}