/* ============================================================
   tokens.css — Twelve design system, Фаза 1 (ядро)
   Три состояния темы:
   • голый :root                          → светлая («Полдень»)
   • @media (prefers-color-scheme: dark)  → тёмная, если тема не выбрана явно
   • :root[data-theme="dark"] / ["light"] → ручной тумблер выигрывает в обе стороны
   Каждый токен объявлен в голом :root до любых переопределений.
   ============================================================ */
:root {
  color-scheme: light;

  /* — нейтрали: тёплый серый с лёгким смещением к акценту, не чистый серый и не крем — */
  --ground:        #F4F2ED;   /* фон страницы */
  --surface:       #FAF8F4;   /* карточки, приподнятый слой 1 */
  --raised:        #FFFFFF;   /* поповеры, поля ввода */
  --sunken:        #ECE8E0;   /* колодцы, фон кода */
  --ink:           #232019;   /* основной текст */
  --ink-soft:      #5B5449;   /* вторичный текст */
  --ink-faint:     #8A8374;   /* третичный текст, подписи */
  --line:          #DCD7CB;   /* границы, разделители */
  --line-strong:   #C3BCAC;   /* заметная граница, засечки */

  /* — акцент: burnt sienna. Тёплый, приземлённый, не неон. Один на всю систему — */
  --accent:          #E27C4F;   /* оранжевый — один на светлой и тёмной теме */
  --accent-hover:    #C25E2E;
  --accent-ink:      #BC5220;   /* акцент как текст на --ground (контраст под жирный/крупный) */
  --accent-contrast: #241810;   /* тёмный текст на оранжевой заливке */
  --accent-soft:     #F0E1D4;   /* тонированный фон */
  --accent-line:     #E0B189;   /* граница в акцентной зоне */

  /* — семантика: отдельно от акцента — */
  --good:          #3C6B45;
  --good-soft:     #E1EDE0;
  --warn:          #8A5A12;
  --warn-soft:     #F1E7D1;
  --critical:      #A2392C;
  --critical-soft: #F3E0DC;

  --focus:         #B4470E;

  /* — типографика — */
  --font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Раньше был IBM Plex Mono. Ушли к двум гарнитурам: Serif — заголовки, Sans — всё
     остальное. «Техничные» подписи и кикеры теперь Sans прописными с широким трекингом. */
  --font-mono:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs:   0.75rem;    --lh-xs:   1.5;
  --text-sm:   0.8125rem;  --lh-sm:   1.5;
  --text-base: 1.0625rem;  --lh-base: 1.65;
  --text-md:   1.1875rem;  --lh-md:   1.6;
  --text-lg:   1.4375rem;  --lh-lg:   1.35;
  --text-xl:   1.8125rem;  --lh-xl:   1.25;
  --text-2xl:  2.375rem;   --lh-2xl:  1.15;
  --text-3xl:  clamp(2.75rem, 2rem + 3vw, 3.75rem); --lh-3xl: 1.04;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  --tracking-tight:  -0.014em;
  --tracking-normal: 0;
  --tracking-label:  0.09em;

  /* — раскладка — */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  --measure:          65ch;
  --container:        72rem;
  --container-narrow: 44rem;

  /* — тени: по ролям, не одна на всё — */
  --shadow-sm: 0 1px 2px rgba(35,32,25,.06), 0 1px 1px rgba(35,32,25,.04);
  --shadow-md: 0 2px 4px rgba(35,32,25,.06), 0 8px 20px -8px rgba(35,32,25,.16);
  --shadow-lg: 0 4px 8px rgba(35,32,25,.08), 0 24px 48px -16px rgba(35,32,25,.22);

  /* — движение: только функциональное — */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --ease-out:   cubic-bezier(.2,.6,.2,1);
  --ease-inout: cubic-bezier(.4,0,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ground:      #15130E;
    --surface:     #1E1B15;
    --raised:      #262219;
    --sunken:      #100E0A;
    --ink:         #ECE7DC;
    --ink-soft:    #ABA290;
    --ink-faint:   #7E7565;
    --line:        #332F26;
    --line-strong: #4A4335;

    --accent:          #E27C4F;
    --accent-hover:    #EC8C63;
    --accent-ink:      #E9906B;
    --accent-contrast: #1A140F;
    --accent-soft:     #2E2318;
    --accent-line:     #5C3F2C;

    --good:          #7FAE85;
    --good-soft:     #1F2A20;
    --warn:          #D2A25A;
    --warn-soft:     #2C2413;
    --critical:      #D98A7C;
    --critical-soft: #2E1C18;

    --focus:         #E27C4F;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
    --shadow-md: 0 2px 6px rgba(0,0,0,.40), 0 12px 28px -10px rgba(0,0,0,.60);
    --shadow-lg: 0 8px 20px rgba(0,0,0,.50), 0 32px 60px -20px rgba(0,0,0,.70);
  }
}

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

  --ground:      #15130E;
  --surface:     #1E1B15;
  --raised:      #262219;
  --sunken:      #100E0A;
  --ink:         #ECE7DC;
  --ink-soft:    #ABA290;
  --ink-faint:   #7E7565;
  --line:        #332F26;
  --line-strong: #4A4335;

  --accent:          #E27C4F;
  --accent-hover:    #EC8C63;
  --accent-ink:      #E9906B;
  --accent-contrast: #1A140F;
  --accent-soft:     #2E2318;
  --accent-line:     #5C3F2C;

  --good:          #7FAE85;
  --good-soft:     #1F2A20;
  --warn:          #D2A25A;
  --warn-soft:     #2C2413;
  --critical:      #D98A7C;
  --critical-soft: #2E1C18;

  --focus:         #E27C4F;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --shadow-md: 0 2px 6px rgba(0,0,0,.40), 0 12px 28px -10px rgba(0,0,0,.60);
  --shadow-lg: 0 8px 20px rgba(0,0,0,.50), 0 32px 60px -20px rgba(0,0,0,.70);
}