/* ds v1.0.1 — Дизайн-система шасси (Оракул · Права · Хаб) · tokens.css
   Слой 1: фолбэки Telegram-темы (для веба вне TMA) + примитивы шкал.
   Слой 2: семантика --ds-* — КОМПОНЕНТЫ ССЫЛАЮТСЯ ТОЛЬКО НА НЕЁ.
   Слой 3: темы продуктов [data-theme]. Light/dark — из Telegram (colorScheme→data-scheme),
           веб-фолбэк — prefers-color-scheme. Никаких сырых цветов в компонентах.
   Синк в Хаб/Права — копией файла; версию в шапке не забывать. */

:root {
  /* ─────────── Шкалы (не зависят от темы/схемы) ─────────── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px;
  --r-s:8px; --r-m:12px; --r-l:16px; --r-full:999px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-caption:12px; --fs-body:15px; --fs-title:17px; --fs-h2:20px; --fs-h1:24px; --fs-display:34px;
  --fw-regular:400; --fw-semibold:600; --fw-bold:700;
  --lh-tight:1.2; --lh-base:1.5;
  --t-fast:150ms; --t-base:250ms; --t-ritual:400ms;
  --ease-out:cubic-bezier(.2,.6,.2,1); --ease-spring:cubic-bezier(.34,1.4,.5,1);

  /* ─────────── Слой 2: семантика — СВЕТЛАЯ база (нейтральная) ─────────── */
  --ds-bg:            var(--tg-theme-bg-color, #F4F4F7);
  --ds-surface:       var(--tg-theme-secondary-bg-color, #FFFFFF);
  --ds-surface-2:     #F0F0F4;
  --ds-text:          var(--tg-theme-text-color, #1A1A20);
  --ds-text-soft:     var(--tg-theme-hint-color, #6E6E78);
  --ds-hint:          #A4A4AE;
  --ds-accent:        var(--tg-theme-button-color, #7C3AED);
  --ds-accent-soft:   #ECE7FB;
  --ds-on-accent:     var(--tg-theme-button-text-color, #FFFFFF);
  --ds-success:       #2E9E78;
  --ds-warning:       #C0851E;
  --ds-danger:        var(--tg-theme-destructive-text-color, #D64545);
  --ds-border:        rgba(0,0,0,.08);
  --ds-overlay-scrim: rgba(20,20,25,.45);
  --r-card:           var(--r-l);   /* радиус карточек — тема может переопределить */
  --sh-card:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh-sheet: 0 -4px 24px rgba(0,0,0,.12);
}

/* ─────────── Тёмная схема (Telegram colorScheme='dark' → data-scheme, или тумблер) ─────────── */
:root[data-scheme="dark"] {
  --ds-bg:            var(--tg-theme-bg-color, #17181B);
  --ds-surface:       var(--tg-theme-secondary-bg-color, #212226);
  --ds-surface-2:     #2A2B30;
  --ds-text:          var(--tg-theme-text-color, #ECECEF);
  --ds-text-soft:     var(--tg-theme-hint-color, #A6A6AD);
  --ds-hint:          #79797F;
  --ds-accent:        var(--tg-theme-button-color, #8B5CF6);
  --ds-accent-soft:   #2A2340;
  --ds-border:        rgba(255,255,255,.07);
  --ds-overlay-scrim: rgba(0,0,0,.55);
  --sh-card:  none;
  --sh-sheet: 0 -4px 24px rgba(0,0,0,.4);
}
/* Веб-фолбэк вне TMA: следуем системной схеме, если явная (data-scheme) не задана */
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --ds-bg:#17181B; --ds-surface:#212226; --ds-surface-2:#2A2B30;
    --ds-text:#ECECEF; --ds-text-soft:#A6A6AD; --ds-hint:#79797F;
    --ds-accent:#8B5CF6; --ds-accent-soft:#2A2340;
    --ds-border:rgba(255,255,255,.07); --ds-overlay-scrim:rgba(0,0,0,.55);
    --sh-card:none; --sh-sheet:0 -4px 24px rgba(0,0,0,.4);
  }
}

/* ─────────── Слой 3: темы продуктов ─────────── */

/* Оракул — white-minimal: один фиолетовый акцент, мягкие радиусы, ритуальный motion */
[data-theme="oracle"]{
  --ds-accent:#7C3AED; --ds-accent-soft:#ECE7FB; --ds-on-accent:#FFFFFF;
  --r-card:var(--r-l);
  --oracle-streak:#E8792B;                 /* 🔥 стрик */
  --oracle-lock:var(--ds-hint);            /* замок тизера */
}
[data-theme="oracle"][data-scheme="dark"]{ --ds-accent:#8B5CF6; --ds-accent-soft:#2A2340; }

/* Права — утилитарный траст: уверенный сине-зелёный «дорожный» (нейтральный, НЕ Statens vegvesen).
   v1.1 skin (D29): палитра t3 + подача t4. Акцент — сине-зелёный градиент; глубина через
   приподнятые поверхности и мягкий свет; радиусы-пилюли. Всё через токены, без хардкода. */
[data-theme="prava"]{
  /* LIGHT — warm YELLOW accent (owner: warmer palette, less blue light for evening study).
     TWO accent roles: FILL = bright yellow gradient + black text (--prava-cta-grad,
     --ds-on-accent:#000); TEXT/number/chip/icon = readable DARK GOLD (--ds-accent,
     --prava-accent-grad) that passes contrast on white. ?theme=teal restores the old teal. */
  --ds-bg:#F5F7F9; --ds-surface:#FFFFFF; --ds-surface-2:#EEF1F4;
  /* --ds-hint was #93A0AB = 2.49:1 on the page — it carries the micro-copy under every CTA
     and in every footer, so it has to clear WCAG AA 4.5. Now 4.59:1 on bg, 4.93:1 on white.
     --ds-accent is the TEXT role (dark gold); at #9A7A00 it was 3.79:1 on bg and 3.67:1 on
     accent-soft. Now 4.70 / 5.05 / 4.56. Bright yellow stays with the FILLS
     (--prava-cta-grad), which are untouched. (audit I1/I2) */
  --ds-text:#101820; --ds-text-soft:#576471; --ds-hint:#5B646A;
  --ds-accent:#7C6100; --ds-accent-2:#C89400; --ds-accent-soft:#FFF3CC; --ds-on-accent:#000000;
  --ds-warning:#E07A1F;
  /* Warning as a FILL stays #E07A1F; warning as TEXT on its own 12% tint was 2.67:1.
     Split the roles, same as accent fill vs accent text. (audit D60) */
  --prava-warning-text:#8F4C12;
  --ds-border:rgba(16,40,56,.10);
  --r-card:20px; --r-shell:28px; --r-pill:999px;

  /* correct/success = distinct GREEN (never the accent); warning = ORANGE; danger = RED. */
  --prava-correct:#12A65E; --prava-wrong:#C43C3C; --prava-timer:#E07A1F;
  --prava-accent-grad:linear-gradient(120deg,#B8860B,#8A6A00);   /* dark gold: readable numbers/progress on white */
  --prava-cta-grad:linear-gradient(120deg,#FFD016,#FF9E00);      /* VIVID yellow→amber buttons (black text) */
  --prava-glow:rgba(255,158,0,.24);
  --prava-elev:linear-gradient(165deg,#FFFFFF,#F3F6F8);
  /* Weak-topic ramp: low RED · mid ORANGE · high GREEN. */
  --prava-low:#C43C3C; --prava-mid:#E07A1F; --prava-high:#12A65E;

  --prava-sh-card:0 6px 16px rgba(16,40,56,.06), 0 1px 3px rgba(16,40,56,.05);
  --prava-sh-hero:0 24px 60px rgba(16,40,56,.12), inset 0 1px 0 rgba(255,255,255,.6);
  --prava-sh-cta:0 6px 20px rgba(255,160,0,.42), inset 0 1px 0 rgba(255,255,255,.5);
  --prava-sh-tab:0 8px 30px rgba(16,40,56,.14);
  --prava-hairline:rgba(255,255,255,.6);
}
/* DARK (t3a/t4) — near-black, blue-cooled; глубина через свечение и слои. Owner reviews here. */
[data-theme="prava"][data-scheme="dark"]{
  --ds-bg:#0B0E13; --ds-surface:#141A22; --ds-surface-2:#1C232C;
  --ds-text:#F2F5F7; --ds-text-soft:#8B95A0; --ds-hint:#8A9199;  /* was #59636E = 3.16:1 (audit I1) */
  --ds-accent:#FFCF33; --ds-accent-2:#FFB020; --ds-accent-soft:#332B0A; --ds-on-accent:#000000;
  --ds-warning:#FF9B3D; --prava-warning-text:#FF9B3D;
  --ds-border:rgba(255,255,255,.08);

  --prava-correct:#3BE38C; --prava-wrong:#FF6B6B; --prava-timer:#FF9B3D;
  --prava-accent-grad:linear-gradient(120deg,#FFD60A,#FFB020);   /* bright gold: readable numbers on near-black */
  --prava-cta-grad:linear-gradient(120deg,#FFD824,#FF9E00);      /* VIVID yellow→amber buttons (black text) */
  --prava-glow:rgba(255,180,0,.24);
  --prava-elev:linear-gradient(165deg,#141A22,#10151B);
  --prava-low:#FF6B6B; --prava-mid:#FF9B3D; --prava-high:#3BE38C;

  --prava-sh-card:0 2px 10px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
  --prava-sh-hero:0 24px 50px rgba(0,0,0,.45), 0 0 40px var(--prava-glow), inset 0 1px 0 rgba(255,255,255,.06);
  --prava-sh-cta:0 6px 22px rgba(255,180,0,.40), inset 0 1px 0 rgba(255,255,255,.45);
  --prava-sh-tab:0 -8px 24px rgba(0,0,0,.35);
  --prava-hairline:rgba(255,255,255,.08);
}
/* Web fallback outside TMA: follow the system scheme when no explicit data-scheme is set,
   so the dark skin shows without the Telegram colorScheme signal. */
@media (prefers-color-scheme: dark){
  [data-theme="prava"]:not([data-scheme="light"]){
    --ds-bg:#0B0E13; --ds-surface:#141A22; --ds-surface-2:#1C232C;
    --ds-text:#F2F5F7; --ds-text-soft:#8B95A0; --ds-hint:#8A9199;  /* was #59636E = 3.16:1 (audit I1) */
    --ds-accent:#FFCF33; --ds-accent-2:#FFB020; --ds-accent-soft:#332B0A; --ds-on-accent:#000000;
    --ds-warning:#FF9B3D; --prava-warning-text:#FF9B3D;
    --ds-border:rgba(255,255,255,.08);
    --prava-correct:#3BE38C; --prava-wrong:#FF6B6B; --prava-timer:#FF9B3D;
    --prava-accent-grad:linear-gradient(120deg,#FFD60A,#FFB020);
    --prava-cta-grad:linear-gradient(120deg,#FFD824,#FF9E00);
    --prava-glow:rgba(255,180,0,.24);
    --prava-elev:linear-gradient(165deg,#141A22,#10151B);
    --prava-low:#FF6B6B; --prava-mid:#FF9B3D; --prava-high:#3BE38C;
    --prava-sh-card:0 2px 10px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
    --prava-sh-hero:0 24px 50px rgba(0,0,0,.45), 0 0 40px var(--prava-glow), inset 0 1px 0 rgba(255,255,255,.06);
    --prava-sh-cta:0 6px 22px rgba(255,180,0,.40), inset 0 1px 0 rgba(255,255,255,.45);
    --prava-sh-tab:0 -8px 24px rgba(0,0,0,.35);
    --prava-hairline:rgba(255,255,255,.08);
  }
}

/* Хаб — рабочий дашборд: акцент = кнопка Telegram как есть, плотно, нулевой декор */
[data-theme="hub"]{
  --ds-accent:var(--tg-theme-button-color,#3A6FF0); --ds-accent-soft:#E4ECFD; --ds-on-accent:#FFFFFF;
  --r-card:var(--r-m);
  --hub-ok:#2E9E78; --hub-warn:#C0851E; --hub-dead:#8A8A93; --hub-ad:#7C3AED;
}
/* --ds-accent повторяем явно: :root[data-scheme="dark"] (0,2,0) перебивает [data-theme="hub"] (0,1,0),
   иначе в тёмной теме Хаб терял tg-кнопку и наследовал фиолет Оракула. */
[data-theme="hub"][data-scheme="dark"]{ --ds-accent:var(--tg-theme-button-color,#5B8DEF); --ds-accent-soft:#1A2540; --hub-dead:#6A6A72; }