/* =============================================================================
   SoundingKit — design tokens
   Єдине джерело правди для кольору, типографіки, ритму й тіней.
   Три оболонки (site / docs / app) використовують ЦІ токени і не заводять своїх.

   Палітра перевірена валідатором:
     - шкала глибин (--depth-*) — легенда карти й декор, НЕ палітра діаграм:
       світлий кінець дає 1.17:1 на світлій поверхні, глибокий 1.14:1 на темній;
     - для діаграм — однотонна рампа --chart-1..6 на тоні 238° (власний синій бренду),
       світла тема бере темні кроки, темна — світлі; обидві проходять усі перевірки;
     - --st-* (статуси) зарезервовані, ніколи не використовуються як кольори серій.
   ============================================================================= */

:root {
  color-scheme: light;

  /* ---- батиметрична шкала: карта, легенда, декор ------------------------- */
  --depth-1:#CDEFDD; --depth-2:#9FE0CF; --depth-3:#6BCBC5;
  --depth-4:#3FAFBE; --depth-5:#2191B2; --depth-6:#1272A1;
  --depth-7:#0E5484; --depth-8:#0A3A63; --depth-9:#062441;
  --abyss:#04182C;
  --depth-ramp:linear-gradient(90deg,
    var(--depth-1),var(--depth-2),var(--depth-3),var(--depth-4),var(--depth-5),
    var(--depth-6),var(--depth-7),var(--depth-8),var(--depth-9));

  /* ---- рампа діаграм (світла тема: темні кроки) -------------------------- */
  --chart-1:#4595C5; --chart-2:#3082B1; --chart-3:#176F9D;
  --chart-4:#0F5D85; --chart-5:#0A4B6C; --chart-6:#063A54;
  --chart-accent:var(--chart-3);

  /* ---- статуси ----------------------------------------------------------- */
  --st-ok:#12784E;    --st-ok-bg:#E6F4ED;
  --st-warn:#8A5A00;  --st-warn-bg:#FBF0DC;
  --st-crit:#B3341A;  --st-crit-bg:#FBE9E5;
  --st-idle:#526673;  --st-idle-bg:#EDF1F3;

  /* ---- поверхні й чорнило ------------------------------------------------ */
  --bg:#F7F9FA;
  --surface:#FFFFFF;
  --surface-2:#F1F5F7;
  --surface-inset:#EDF2F4;
  --ink:#08202F;
  --ink-2:#44606F;
  --ink-3:#5C7280;
  --line:#DCE5E8;
  --line-strong:#C2D1D7;
  --grid:#E6EDEF;

  --accent:#0E5484;
  --accent-hover:#0A426A;
  --accent-ink:#FFFFFF;
  --accent-soft:#E7EFF5;
  --focus:#1B72A0;

  /* ---- типографіка ------------------------------------------------------- */
  --font-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:Archivo,var(--font-sans);
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --fs-2xs:11px; --fs-xs:12px;  --fs-sm:13px;  --fs-md:14px;
  --fs-base:15px; --fs-lg:17px; --fs-xl:20px;  --fs-2xl:25px;
  --fs-3xl:32px;  --fs-4xl:42px;

  --lh-tight:1.15; --lh-snug:1.35; --lh-normal:1.6;
  --tracking-tight:-.025em; --tracking-wide:.16em;

  /* ---- ритм -------------------------------------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --r-sm:3px; --r-md:5px; --r-lg:8px; --r-pill:999px;

  --shadow-1:0 1px 2px rgba(8,32,47,.06);
  --shadow-2:0 4px 14px -4px rgba(8,32,47,.14);
  --shadow-3:0 18px 44px -18px rgba(8,32,47,.30);

  /* ---- розміри оболонки кабінету ----------------------------------------- */
  --app-sidebar:232px;
  --app-topbar:56px;
  --app-row:36px;        /* висота рядка таблиці */
  --content-max:1180px;
  --prose-max:72ch;

  --dur:.16s;
}

/* ---------- темна тема: системна перевага ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --chart-1:#BFE4FD; --chart-2:#95D3FC; --chart-3:#72C1F3;
    --chart-4:#5DACDE; --chart-5:#4898C8; --chart-6:#3384B3;
    --chart-accent:var(--chart-3);

    --st-ok:#4FC98D;    --st-ok-bg:#0C2E22;
    --st-warn:#E8A93C;  --st-warn-bg:#33270D;
    --st-crit:#FF8560;  --st-crit-bg:#3A1A12;
    --st-idle:#8FA9BA;  --st-idle-bg:#132B3D;

    --bg:#04182C;
    --surface:#092235;
    --surface-2:#0C2A40;
    --surface-inset:#061D2E;
    --ink:#E8F1F6;
    --ink-2:#A8C2D0;
    --ink-3:#8FA9BA;
    --line:#153348;
    --line-strong:#1E445E;
    --grid:#123045;

    --accent:#72C1F3;
    --accent-hover:#95D3FC;
    --accent-ink:#04182C;
    --accent-soft:#0F2E45;
    --focus:#72C1F3;

    --shadow-1:0 1px 2px rgba(0,0,0,.40);
    --shadow-2:0 4px 14px -4px rgba(0,0,0,.55);
    --shadow-3:0 18px 44px -18px rgba(0,0,0,.70);
  }
}

/* ---------- темна тема: явний вибір користувача ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --chart-1:#BFE4FD; --chart-2:#95D3FC; --chart-3:#72C1F3;
  --chart-4:#5DACDE; --chart-5:#4898C8; --chart-6:#3384B3;
  --chart-accent:var(--chart-3);

  --st-ok:#4FC98D;    --st-ok-bg:#0C2E22;
  --st-warn:#E8A93C;  --st-warn-bg:#33270D;
  --st-crit:#FF8560;  --st-crit-bg:#3A1A12;
  --st-idle:#8FA9BA;  --st-idle-bg:#132B3D;

  --bg:#04182C;
  --surface:#092235;
  --surface-2:#0C2A40;
  --surface-inset:#061D2E;
  --ink:#E8F1F6;
  --ink-2:#A8C2D0;
  --ink-3:#8FA9BA;
  --line:#153348;
  --line-strong:#1E445E;
  --grid:#123045;

  --accent:#72C1F3;
  --accent-hover:#95D3FC;
  --accent-ink:#04182C;
  --accent-soft:#0F2E45;
  --focus:#72C1F3;

  --shadow-1:0 1px 2px rgba(0,0,0,.40);
  --shadow-2:0 4px 14px -4px rgba(0,0,0,.55);
  --shadow-3:0 18px 44px -18px rgba(0,0,0,.70);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; }
}