/* ScaleQL · токены.
   Цвет взят из логотипа: синий #015ded, белый #fdfdfd, почти чёрный #040405.
   Логотип нарисован под светлый фон, поэтому светлая тема — основная,
   тёмная идёт следом и живёт на тех же ролях.

   Правила, которые нельзя нарушать по ходу:
   1. Акцент один — фирменный синий. Зелёный и красный означают только
      «верно» и «неверно», украшать ими нельзя.
   2. Радиус один — 8px. Полное скругление только у полос и кружков.
   3. Все числа набираются моноширинным: цифры должны стоять в колонку.
   4. Глубина — тонкая тень на светлой теме и ступень поверхности на тёмной.
      Никаких свечений и градиентных плашек. */

:root{
  color-scheme: light dark;

  /* ── светлая тема: нейтрали холодные, под синий ────────── */
  --ink-950:#F5F7FB;   /* фон страницы            */
  --ink-900:#FDFDFE;   /* поверхность, карточка   */
  --ink-850:#FFFFFF;   /* приподнятая поверхность */
  --ink-800:#EDF1F8;   /* наведение               */
  --ink-750:#E3E9F3;
  --line:#E1E7F0;
  --line-strong:#C7D0DF;

  --tx:#0F1729;        /* основной текст          */
  --tx-2:#4B5568;      /* вторичный, 6.9:1        */
  --tx-3:#626C7E;      /* подписи, 5:1            */

  --code-bg:#F2F5FA;   /* редактор и блоки кода   */

  /* ── акцент: фирменный синий ──────────────────────────── */
  --acc:#0B4FC7;       /* текст и линии, 7.3:1 на фоне страницы */
  --acc-hi:#083C99;
  --acc-deep:#015ded;
  --acc-soft:rgba(1,93,237,.08);
  --acc-line:rgba(1,93,237,.24);

  /* Заливка кнопки одна на обе темы: белый на ней читается и там, и там. */
  --acc-fill:#015ded;
  --acc-fill-hi:#1B6DF5;
  --acc-ink:#FFFFFF;

  /* ── смысловые состояния ──────────────────────────────── */
  --ok:#12784A;  --ok-soft:rgba(18,120,74,.09);  --ok-line:rgba(18,120,74,.26);
  --bad:#C22B3E; --bad-soft:rgba(194,43,62,.08); --bad-line:rgba(194,43,62,.24);

  /* ── подсветка SQL ────────────────────────────────────── */
  --syn-kw:#0B4FC7;
  --syn-fn:#7A3FB8;
  --syn-str:#2C7A3F;
  --syn-num:#9A5A12;
  --syn-com:#8B93A3;

  --shadow:0 1px 2px rgba(15,23,41,.05), 0 1px 1px rgba(15,23,41,.04);
  --shadow-lift:0 4px 14px -6px rgba(15,23,41,.18);

  /* ── шрифт ────────────────────────────────────────────── */
  --font:'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display:clamp(25px, 4.2vw, 31px);
  --fs-h1:clamp(20px, 3.2vw, 24px);
  --fs-h2:19px;
  --fs-h3:16px;
  --fs-body:15px;
  --fs-sm:13.5px;
  --fs-xs:12px;
  --fs-micro:11px;
  --fs-code:13.2px;

  --lh-tight:1.08;
  --lh-head:1.24;
  --lh-body:1.62;

  --track-display:-.022em;
  --track-caps:.08em;

  /* ── ритм ─────────────────────────────────────────────── */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:28px; --sp-7:40px; --sp-8:56px; --sp-9:80px;

  /* ── форма ────────────────────────────────────────────── */
  --r:8px;
  --r-xs:5px;
  --r-full:999px;

  --ring:0 0 0 2px var(--ink-950), 0 0 0 4px var(--acc);

  /* ── движение: только обратная связь ──────────────────── */
  --dur-1:90ms; --dur-2:160ms; --dur-3:260ms;
  --ease:cubic-bezier(.32,.72,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ── каркас ───────────────────────────────────────────── */
  --header-h:52px;
  --tabbar-h:58px;
  --measure:66ch;
  --col:640px;
  --tap:40px;
  --safe-b:env(safe-area-inset-bottom, 0px);
}

/* ── тёмная тема ─────────────────────────────────────────
   Те же роли, другой материал. Синий поднимается по светлоте,
   чтобы остаться читаемым, заливка кнопки не меняется.        */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink-950:#0E1117;
    --ink-900:#151A22;
    --ink-850:#1B212B;
    --ink-800:#232A36;
    --ink-750:#2C3441;
    --line:#262E3A;
    --line-strong:#37414F;

    --tx:#F2F5FA;
    --tx-2:#A8B2C4;
    --tx-3:#7C8698;

    --code-bg:#0A0D13;

    --acc:#5B9CFF;
    --acc-hi:#8AB8FF;
    --acc-deep:#015ded;
    --acc-soft:rgba(91,156,255,.12);
    --acc-line:rgba(91,156,255,.30);
    --acc-fill:#1D66E8;
    --acc-fill-hi:#3179F5;

    --ok:#4ECB8A;  --ok-soft:rgba(78,203,138,.12);  --ok-line:rgba(78,203,138,.30);
    --bad:#F0707F; --bad-soft:rgba(240,112,127,.12); --bad-line:rgba(240,112,127,.30);

    --syn-kw:#7FB4E8;
    --syn-fn:#C4A2E8;
    --syn-str:#9BC96B;
    --syn-num:#E8B072;
    --syn-com:#6B7484;

    --shadow:none;
    --shadow-lift:none;
  }
}

:root[data-theme="dark"]{
  --ink-950:#0E1117;
  --ink-900:#151A22;
  --ink-850:#1B212B;
  --ink-800:#232A36;
  --ink-750:#2C3441;
  --line:#262E3A;
  --line-strong:#37414F;

  --tx:#F2F5FA;
  --tx-2:#A8B2C4;
  --tx-3:#7C8698;

  --code-bg:#0A0D13;

  --acc:#5B9CFF;
  --acc-hi:#8AB8FF;
  --acc-deep:#015ded;
  --acc-soft:rgba(91,156,255,.12);
  --acc-line:rgba(91,156,255,.30);
  --acc-fill:#1D66E8;
  --acc-fill-hi:#3179F5;

  --ok:#4ECB8A;  --ok-soft:rgba(78,203,138,.12);  --ok-line:rgba(78,203,138,.30);
  --bad:#F0707F; --bad-soft:rgba(240,112,127,.12); --bad-line:rgba(240,112,127,.30);

  --syn-kw:#7FB4E8;
  --syn-fn:#C4A2E8;
  --syn-str:#9BC96B;
  --syn-num:#E8B072;
  --syn-com:#6B7484;

  --shadow:none;
  --shadow-lift:none;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-1:0ms; --dur-2:0ms; --dur-3:0ms; }
}