/* Порядок слоёв задаётся один раз. Всё, что ниже, обёрнуто в свой слой */
@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    color-scheme: light;

    /* Бренд и тона: --c-* для заливок, --c-*-ink для текста (контраст ≥ 4.5:1) */
    --brand: #2563EB; --brand-2: #4F46E5; --brand-ink: #FFFFFF; --brand-deep: #1D4ED8;
    --c-blue: #2563EB;   --c-blue-ink: #1D4ED8;
    --c-green: #10B981;  --c-green-ink: #047857;
    --c-orange: #F59E0B; --c-orange-ink: #B45309;
    --c-purple: #8B5CF6; --c-purple-ink: #6D28D9;
    --c-gray: #98A1B3;   --c-gray-ink: #5B6478;
    --danger: #EF4444;   --danger-ink: #B91C1C;

    /* Поверхности и текст */
    --bg: #F3F5FA; --surface: #FFFFFF; --surface-2: #EEF1F7;
    --text: #0F172A; --text-2: #5B6478; --text-3: #98A1B3;
    --line: rgb(15 23 42 / .08);
    --line-strong: rgb(15 23 42 / .16);
    --brand-soft: color-mix(in srgb, var(--brand) 12%, transparent);
    --danger-soft: color-mix(in srgb, var(--danger) 10%, transparent);
    --scrim: rgb(6 10 20 / .5);

    /* Типографика: семейства — в fonts.css (единая настройка шрифтов) */
    --fs-2xs: .6875rem; --fs-xs: .75rem; --fs-s: .8125rem; --fs-btn: .875rem;
    --fs-m: .9375rem; --fs-input: 1rem; --fs-l: 1.0625rem; --fs-xl: 1.1875rem;
    --fw-medium: 600; --fw-bold: 700; --fw-heavy: 800;

    /* Отступы */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;
    --pad-l: max(var(--sp-4), env(safe-area-inset-left, 0px));
    --pad-r: max(var(--sp-4), env(safe-area-inset-right, 0px));
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);

    /* Радиусы: вложенный меньше родителя.
       --r-card — единственная ручка для карточек-подложек кабинета и платформы
       (.panel, .stat, .tile, .action-tile, .card, блок профиля в шапке):
       меняешь её — меняется всё семейство мини-окон. */
    --r-xs: 10px; --r-s: 14px; --r-m: 16px; --r-l: 20px; --r-card: 10px; --r-xl: 28px; --r-full: 999px;

    /* Размеры касания и контролов */
    --tap: 44px; --ctl-h: 50px; --btn-h: 46px; --btn-h-sm: 38px; --btn-h-lg: 52px;

    /* Тени */
    --sh-btn: 0 1px 2px rgb(15 23 42 / .06);
    --sh-1: 0 1px 2px rgb(15 23 42 / .04), 0 6px 18px -8px rgb(15 23 42 / .12);
    --sh-2: 0 2px 6px rgb(15 23 42 / .06), 0 22px 44px -14px rgb(15 23 42 / .28);
    --sh-3: 0 -8px 30px -10px rgb(15 23 42 / .18), 0 30px 60px -20px rgb(15 23 42 / .35);
    --sh-brand: 0 10px 24px -10px color-mix(in srgb, var(--brand) 85%, transparent);
    --ring: 0 0 0 4px var(--brand-soft);

    /* Движение */
    --ease: cubic-bezier(.22, .8, .24, 1);
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    --t-fast: .15s; --t-base: .25s; --t-slow: .4s;

    /* Каркас: --work-w — единая ширина рабочей области для всех страниц
       (кабинеты, запись, настройки). Меняется в одном месте. */
    --work-w: 760px;
    --page: var(--work-w);
    --bar-h: 64px;
    --z-bar: 30;          /* окна и тост живут в top layer, им z-index не нужен */
    --kb: 0px;            /* высота экранной клавиатуры, считает ui/sheet.js */
  }

  [data-theme="dark"] {
    color-scheme: dark;
    --bg: #0B0E16; --surface: #141925; --surface-2: #1E2432;
    --text: #EEF2F8; --text-2: #A1AABC; --text-3: #6B7487;
    --line: rgb(255 255 255 / .08);
    --line-strong: rgb(255 255 255 / .18);
    --brand-deep: #172554;
    --c-blue-ink: #93B4FF; --c-green-ink: #34D399; --c-orange-ink: #FBBF24;
    --c-purple-ink: #C4B5FD; --c-gray-ink: #A1AABC; --danger-ink: #FCA5A5;
    --brand-soft: color-mix(in srgb, var(--brand) 24%, transparent);
    --danger-soft: color-mix(in srgb, var(--danger) 16%, transparent);
    --sh-btn: none;
    --sh-1: 0 1px 0 rgb(255 255 255 / .03) inset, 0 8px 20px -10px rgb(0 0 0 / .7);
    --sh-2: 0 24px 50px -14px rgb(0 0 0 / .8);
    --sh-3: 0 -10px 40px -10px rgb(0 0 0 / .6), 0 30px 60px -20px rgb(0 0 0 / .8);
  }
}