/* =====================================================================
   Зилкин — дизайн-токены
   Единственное место, где живут цвета, шрифты, отступы, радиусы и тени.
   Компоненты (components.css) и страницы используют ТОЛЬКО семантические
   токены (--color-text, --space-4…), а не «сырые» цвета.
   Как менять: поменял значение здесь — поменялось везде. См. design/DESIGN.md.
   ===================================================================== */

:root {
  /* ---------- 1. Палитра (примитивы). Не использовать в компонентах напрямую ---------- */

  /* Фирменный жёлтый — из логотипа RD. Текст на нём всегда тёмный (контраст 13:1). */
  --yellow-50:  #FFFBEA;
  --yellow-100: #FFF3C2;
  --yellow-200: #FFE680;
  --yellow-400: #FFD829;
  --yellow-500: #FFCC00; /* бренд */
  --yellow-600: #F0BD00;
  --yellow-700: #D6A800;

  /* Тёплые «песочные» нейтральные — фон, рамки, текст */
  --stone-0:   #FFFFFF;
  --stone-25:  #FCFBF8;
  --stone-50:  #F7F5F0;
  --stone-100: #EFECE5;
  --stone-200: #E3DFD5;
  --stone-300: #CFC9BC;
  --stone-400: #A39C8E;
  --stone-500: #6B6554;  /* вторичный текст: контраст ≥ 4.5 на белом, stone-50 и stone-100 */
  --stone-600: #5C5749;
  --stone-700: #423E34;
  --stone-800: #2B2923;
  --stone-900: #181714;  /* основной текст и «чернила» */

  /* Служебные */
  --blue-50:  #EDF3FF;  --blue-200: #B9CFFA;  --blue-600: #1F5BD6;  --blue-700: #1848AE;
  --green-50: #ECFAEF;  --green-100: #D3F4DA; --green-200: #A6E5B3; --green-600: #23863B; --green-700: #1C6E30;
  --orange-50: #FFF3E6; --orange-200: #FFCF99; --orange-600: #D9580D; --orange-700: #B04508;
  --red-50:   #FFF0F0;  --red-200: #FFC2C2;   --red-600: #D22B2B;   --red-700: #A91F1F;
  --gray-50:  #F2F3F5;  --gray-300: #C9CDD3;  --gray-600: #636B76;

  /* ---------- 2. Семантические цвета (используются в компонентах) ---------- */
  --color-bg:            var(--stone-50);   /* фон страницы */
  --color-surface:       var(--stone-0);    /* карточки, таблицы, формы */
  --color-surface-sunken:var(--stone-100);  /* подложки, плейсхолдеры, полосы таблиц */
  --color-surface-inverse: var(--stone-900);/* тёмные блоки, подвал */
  --color-border:        var(--stone-200);
  --color-border-strong: var(--stone-300);

  --color-text:          var(--stone-900);
  --color-text-muted:    var(--stone-500);
  --color-text-inverse:  var(--stone-25);
  --color-text-inverse-muted: var(--stone-300);

  --color-primary:       var(--yellow-500); /* главная кнопка, акценты */
  --color-primary-hover: var(--yellow-400);
  --color-primary-press: var(--yellow-600);
  --color-on-primary:    var(--stone-900);
  --color-primary-soft:  var(--yellow-50);  /* подсветка выбранного, «выгодно» */

  --color-link:          var(--stone-900);
  --color-link-hover:    var(--stone-700);
  --color-link-underline:var(--yellow-600); /* жёлтым — только подчёркивание, не текст: жёлтый текст на белом нечитаем */
  --color-focus:         var(--blue-600);   /* кольцо фокуса — заметно и на жёлтом */

  --color-info:     var(--blue-600);   --color-info-soft:    var(--blue-50);
  --color-success:  var(--green-600);  --color-success-soft: var(--green-50);
  --color-warning:  var(--orange-600); --color-warning-soft: var(--orange-50);
  --color-danger:   var(--red-600);    --color-danger-soft:  var(--red-50);

  /* Статусы заявок — цвета владельца из Google-таблицы (ARCHITECTURE §7).
     Цвет никогда не единственный признак: рядом всегда текст статуса. */
  --status-new-bg:        var(--stone-0);    --status-new-fg:        var(--stone-700);  --status-new-dot:        var(--stone-400);
  --status-waiting-bg:    var(--blue-50);    --status-waiting-fg:    var(--blue-700);   --status-waiting-dot:    var(--blue-600);
  --status-unconf-bg:     var(--green-50);   --status-unconf-fg:     var(--green-700);  --status-unconf-dot:     var(--green-200);
  --status-sent-bg:       var(--green-100);  --status-sent-fg:       var(--green-700);  --status-sent-dot:       var(--green-600);
  --status-cancel-bg:     var(--gray-50);    --status-cancel-fg:     var(--gray-600);   --status-cancel-dot:     var(--gray-300);
  --status-urgent-bg:     var(--orange-50);  --status-urgent-fg:     var(--orange-700); --status-urgent-dot:     var(--orange-600);

  /* ---------- 3. Типографика ---------- */
  /* Onest — гротеск с хорошей кириллицей. В продакшене — свой хостинг woff2 (DESIGN.md §4). */
  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Шкала 1.2 (малая) → 1.25 (заголовки), заголовки резиновые между телефоном и ПК */
  --text-xs:  0.75rem;   /* 12 — подписи, бейджи */
  --text-sm:  0.875rem;  /* 14 — вторичный текст, таблицы админки */
  --text-md:  1rem;      /* 16 — основной текст (минимум для полей ввода на телефоне) */
  --text-lg:  1.125rem;  /* 18 — лид-абзацы, цены в карточках */
  --text-xl:  1.25rem;   /* 20 */
  --text-2xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);  /* 22→26 h3 */
  --text-3xl: clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem); /* 26→34 h2 */
  --text-4xl: clamp(2rem, 1.55rem + 1.9vw, 3rem);         /* 32→48 h1 */

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.55;

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

  --tracking-caps: 0.08em; /* для надписей капсом, как в логотипе */

  /* ---------- 4. Отступы (сетка 4 px) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 — боковое поле на телефоне */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --section-gap: clamp(var(--space-10), 6vw, var(--space-20)); /* между блоками страницы */

  /* ---------- 5. Форма ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --border-width: 1px;

  --shadow-xs: 0 1px 2px rgb(24 23 20 / 0.06);
  --shadow-sm: 0 1px 3px rgb(24 23 20 / 0.08), 0 1px 2px rgb(24 23 20 / 0.04);
  --shadow-md: 0 6px 16px -4px rgb(24 23 20 / 0.12), 0 2px 4px rgb(24 23 20 / 0.05);
  --shadow-lg: 0 18px 40px -12px rgb(24 23 20 / 0.22);
  --shadow-up: 0 -4px 16px rgb(24 23 20 / 0.08);        /* полоса внизу экрана на телефоне */
  --shadow-drawer: 0 10px 40px rgb(24 23 20 / 0.25);    /* колонка-шторка на телефоне */
  --color-scrim: rgb(24 23 20 / 0.5);                    /* затемнение под шторкой и окошком */

  --focus-ring: 0 0 0 3px var(--stone-0), 0 0 0 5px var(--color-focus);

  /* ---------- 6. Раскладка ---------- */
  --container: 1200px;
  --container-narrow: 760px;  /* статьи, формы */
  --gutter: var(--space-4);   /* 16 на телефоне, растёт ниже в @media */
  --header-h: 64px;
  --tap: 44px;                /* минимальная высота кнопки/поля — под палец */
  /* Брейкпоинты (в @media переменные не работают — значения повторяются руками):
     sm 640px · md 960px · lg 1200px */

  /* ---------- 7. Движение ---------- */
  --dur-fast: 120ms;
  --dur:      200ms;
  --ease:     cubic-bezier(0.2, 0, 0, 1);

  /* ---------- 8. Слои ---------- */
  --z-sticky: 20;
  --z-header: 30;
  --z-drawer: 40;
  --z-toast:  50;
}

@media (min-width: 640px) { :root { --gutter: var(--space-6); } }
@media (min-width: 960px) { :root { --gutter: var(--space-8); --header-h: 72px; } }

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