/* ==========================================================================
   tokens.css — единственный файл, который нужно править, чтобы «перекрасить» проект.

   Как устроено
   1. Палитра описана ОДИН раз через light-dark(светлая, тёмная).
      Переключение темы = смена color-scheme (см. js/kit.js → Kit.theme).
      Нет дублей тёмной палитры (в старом проекте она была записана трижды).
   2. Из одного --accent выводятся tint / soft / focus / glow через color-mix().
      Хотите другой бренд — меняете --accent и --on-accent, остальное следует само.
   3. Настроение (mood) — набор переопределений. Два готовых:
        mission — приборная панель: холодный синий, светлая/тёмная тема, плотная
        cinema  — киношный лендинг: чистый чёрный, янтарь, курсив с засечками
      Mood и схему можно навесить на ЛЮБОЙ блок: <section data-mood="cinema">.
   4. Слои каскада: reset < tokens < base < layout < components < effects < motion
      < utilities. Любой ваш неслойный CSS автоматически сильнее кита.
   ========================================================================== */

@layer reset, tokens, base, layout, components, effects, motion, utilities;

@layer tokens {

  /* ---------- 1. Палитра (light-dark(светлая, тёмная)) ---------- */
  :root {
    color-scheme: light dark;            /* «как в системе»; [data-theme] ниже форсирует */

    /* поверхности */
    --bg-page:      light-dark(#F6F7F9, #0A0E1A);
    --bg-surface:   light-dark(#FFFFFF, #121826);
    --bg-subtle:    light-dark(#EEF0F4, #1A2233);
    --bg-inverse:   light-dark(#0E1116, #F2F5FA);

    /* границы */
    --border:        light-dark(#D9DDE4, #2A3448);
    --border-strong: light-dark(#AEB5C0, #3E4A63);

    /* текст: каждая пара проверена scripts/check-contrast.js (WCAG AA ≥ 4.5) */
    --text:         light-dark(#14181F, #F2F5FA);
    --text-2:       light-dark(#556070, #A5B0C4);
    --text-3:       light-dark(#5F6977, #8C97AD);
    --text-inverse: light-dark(#F2F5FA, #14181F);

    /* акцент: заливка + текст на заливке + акцент как цвет текста/ссылок */
    --accent:       light-dark(#2545D6, #3E62F0);
    --on-accent:    #FFFFFF;
    --accent-text:  light-dark(#2545D6, #8FA6FF);

    /* статусы (базовый цвет; тинты выводятся ниже) */
    --danger:       light-dark(#C22B2B, #F2706E);
    --warning:      light-dark(#8F5108, #E3A340);
    --success:      light-dark(#1B7A46, #45C77F);
    --info:         light-dark(#2A64A6, #5B9BE0);

    /* категориальные метки (источник данных, тип сущности и т.п.) */
    --cat-violet:   light-dark(#7A4FC2, #A98AEC);
    --cat-teal:     light-dark(#0B7060, #2FBCA2);

    /* серии графиков: пять проверенных цветов, различимы в обеих темах */
    --series-1: #4E68CE;
    --series-2: #CA5794;
    --series-3: #D58300;
    --series-4: #007B2A;
    --series-5: #00B5F5;

    /* сетка/оси графиков */
    --chart-grid: light-dark(#E4E7EC, #222B3D);
    --chart-axis: light-dark(#C6CBD4, #33405A);

    /* цвет тени зависит от темы, геометрия — общая (см. блок «производные») */
    --shadow-rgb: light-dark(rgb(20 24 31 / .07), rgb(0 0 0 / .42));
    --shadow-rgb-strong: light-dark(rgb(20 24 31 / .12), rgb(0 0 0 / .55));
    --scrim: light-dark(rgb(10 12 24 / .45), rgb(2 4 10 / .66));

    /* ---------- 2. Типографика ---------- */
    --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    /* шрифтовые «пресеты» одной строкой: font: var(--t-h2). Размеры плавные (clamp). */
    --t-hero:     300 clamp(2.75rem, 1.2rem + 6.2vw, 5.75rem)/1 var(--font-sans);
    --t-display:  600 clamp(1.75rem, 1.35rem + 1.4vw, 2.25rem)/1.15 var(--font-sans);
    --t-h1:       600 clamp(1.5rem, 1.25rem + .9vw, 1.875rem)/1.25 var(--font-sans);
    --t-h2:       600 clamp(1.125rem, 1.05rem + .3vw, 1.25rem)/1.35 var(--font-sans);
    --t-lead:     400 clamp(1.0625rem, 1rem + .3vw, 1.25rem)/1.55 var(--font-sans);
    --t-body:     400 1rem/1.55 var(--font-sans);
    --t-body-sm:  400 .875rem/1.5 var(--font-sans);
    --t-label:    500 .875rem/1.25 var(--font-sans);
    --t-caption:  400 .75rem/1.35 var(--font-sans);
    --t-overline: 600 .6875rem/1.2 var(--font-sans);
    --t-number:   500 1.25rem/1.4 var(--font-sans);
    --t-mono:     400 .8125rem/1.5 var(--font-mono);
    --ls-hero:     -.03em;               /* плотный трекинг заголовков (киношный лендинг) */
    --ls-tight:    -.02em;
    --ls-overline: .12em;

    /* ---------- 3. Форма и ритм ---------- */
    --r-chip: .5rem;   --r-field: .75rem;   --r-card: 1.5rem;   --r-pill: 999px;
    --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem;
    --sp-6: 2rem;   --sp-7: 3rem;  --sp-8: 4rem;   --sp-9: 6rem; --sp-10: 9rem;
    --gutter:    clamp(1rem, .5rem + 2.5vw, 2.5rem);   /* боковое поле страницы */
    --container: 80rem;
    --measure:   62ch;                                  /* комфортная длина строки */
    --control-h: 2.5rem; --control-h-sm: 2rem; --control-h-lg: 3rem;
    --nav-h: 4.5rem;

    /* ---------- 4. Движение ---------- */
    --ease:        cubic-bezier(.32, .72, 0, 1);      /* интерфейсные переходы */
    --ease-out:    cubic-bezier(.16, 1, .3, 1);       /* «вылет и долгая посадка» — reveal */
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-spring: linear(0, .5 8%, .93 20%, 1.05 30%, 1.02 42%, 1 60%, 1);   /* пружинка без JS */
    --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 380ms; --dur-reveal: 700ms;
    --stagger: 60ms;                                   /* шаг каскада */

    /* ---------- 5. Слои по оси Z ---------- */
    --z-base: 1; --z-sticky: 30; --z-nav: 100; --z-dialog: 200; --z-toast: 300; --z-loader: 400;
  }

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

  /* Локальные «острова»: любой блок можно принудительно сделать тёмным/светлым */
  [data-scheme="dark"]  { color-scheme: dark; }
  [data-scheme="light"] { color-scheme: light; }

  /* ---------- 6. Настроения ---------- */
  /* cinema: чёрный экран, янтарь, курсив с засечками. Всегда тёмное. */
  [data-mood="cinema"] {
    color-scheme: dark;
    --bg-page:    #000000;
    --bg-surface: #0C0C0F;
    --bg-subtle:  #16161A;
    --border:        rgb(255 255 255 / .14);
    --border-strong: rgb(255 255 255 / .28);
    --text:   #FFFFFF;
    --text-2: rgb(255 255 255 / .72);
    --text-3: rgb(255 255 255 / .58);
    --accent:      #E8A04A;
    --on-accent:   #0A0A0A;
    --accent-text: #F0B466;
    --r-card: 1.75rem;
    --scrim: rgb(0 0 0 / .72);
  }

  /* Cinema всегда использует тёмные значения статусов, даже при явно светлой теме. */
  :root[data-mood="cinema"] { color-scheme: dark; }

  /* Свой бренд одной строкой: <div data-accent="lime" ...> либо задайте --accent сами */
  [data-accent="lime"]   { --accent: light-dark(#4D7C0F, #A3E635); --on-accent: light-dark(#fff, #0A0A0A); --accent-text: light-dark(#3F6212, #BEF264); }
  [data-accent="coral"]  { --accent: light-dark(#CC3E27, #FF7A5C); --on-accent: light-dark(#fff, #0A0A0A); --accent-text: light-dark(#B93822, #FF9A82); }
  [data-accent="violet"] { --accent: light-dark(#6D3FD1, #9B82F8); --on-accent: light-dark(#fff, #0A0A0A); --accent-text: light-dark(#6D3FD1, #B4A0FF); }
}

/* ---------- 7. Производные токены ----------
   Объявлены на :where(...) (специфичность 0) для КАЖДОГО «корня контекста»:
   иначе значения, посчитанные на :root, наследовались бы внутрь блока с другим
   --accent или другой схемой и не обновлялись. */
@layer tokens {
  :where(:root, [data-mood], [data-accent], [data-scheme]) {
    --accent-tint:  color-mix(in oklab, var(--accent) 11%, var(--bg-surface));
    --accent-soft:  color-mix(in oklab, var(--accent) 40%, var(--bg-surface));
    --accent-mid:   color-mix(in oklab, var(--accent) 78%, var(--text));
    --focus:        color-mix(in oklab, var(--accent) 60%, var(--bg-page));
    --glow:         color-mix(in oklab, var(--accent) 45%, transparent);

    --danger-tint:  color-mix(in oklab, var(--danger)  12%, var(--bg-surface));
    --warning-tint: color-mix(in oklab, var(--warning) 14%, var(--bg-surface));
    --success-tint: color-mix(in oklab, var(--success) 12%, var(--bg-surface));
    --info-tint:    color-mix(in oklab, var(--info)    12%, var(--bg-surface));
    --violet-tint:  color-mix(in oklab, var(--cat-violet) 12%, var(--bg-surface));
    --teal-tint:    color-mix(in oklab, var(--cat-teal)   12%, var(--bg-surface));

    --bg-glass:     color-mix(in oklab, var(--bg-surface) 58%, transparent);
    --border-glass: color-mix(in oklab, var(--text) 16%, transparent);

    --shadow-1: 0 1px 2px var(--shadow-rgb), 0 8px 24px var(--shadow-rgb);
    --shadow-2: 0 2px 4px var(--shadow-rgb-strong), 0 16px 40px var(--shadow-rgb-strong);
    --shadow-glow: 0 10px 40px -10px var(--glow);
    --ring: 0 0 0 3px var(--focus);
  }
}