/* ==========================================================================
   KisGo Design Tokens · v1.0 (draft) · 2026-10-03
   Источник: «KisGo — исследование визуала для дизайн-системы» (02.10.2026)
   Префикс: --kg-*. Темы: светлая (по умолчанию), тёмная (prefers-color-scheme
   или [data-theme="dark"]), схема камеры ([data-scheme="camera"]),
   режим уважения ([data-respect="on"]).
   ========================================================================== */

@import url("fonts.css");

:root {
  color-scheme: light;

  /* ---------- Палитра: сырые значения (не использовать в компонентах) ---------- */
  /* Тёплые нейтральные: «бумага» → «тёмный шоколад» вместо чистого чёрного */
  --kg-paper-0:   #FFFDF8;
  --kg-paper-50:  #FBF5EA;
  --kg-paper-100: #F4EBDC;
  --kg-paper-200: #EDE4D6;
  --kg-paper-300: #DDCFBC;
  --kg-cocoa-400: #9C8A74;
  --kg-cocoa-500: #8A7262;
  --kg-cocoa-600: #6B5446;
  --kg-cocoa-800: #3A2A20;
  --kg-cocoa-900: #2B201A;
  --kg-night-900: #1E1712;
  --kg-night-800: #2A211B;
  --kg-night-700: #3A2D24;
  --kg-night-600: #4A3D33;

  /* Бренд «ягодный»: не совпадает ни с одним цветом редкости */
  --kg-berry-50:  #FCE6EE;
  --kg-berry-100: #F8CEDD;
  --kg-berry-300: #FF7AA5;
  --kg-berry-600: #C2255C;
  --kg-berry-700: #A11B4C;
  --kg-berry-900: #2A0F19;

  /* Цвета дня недели (тайская традиция) — акцент для «цвета дня» */
  --kg-day-sun: #E5484D;  /* воскресенье · красный  */
  --kg-day-mon: #F2C230;  /* понедельник · жёлтый   */
  --kg-day-tue: #F06BA8;  /* вторник · розовый      */
  --kg-day-wed: #3FA34D;  /* среда · зелёный        */
  --kg-day-thu: #F08A24;  /* четверг · оранжевый    */
  --kg-day-fri: #4AA8E8;  /* пятница · голубой      */
  --kg-day-sat: #8E5BD9;  /* суббота · фиолетовый   */

  /* ---------- Семантические роли: светлая тема ---------- */
  --kg-bg:            var(--kg-paper-50);
  --kg-surface:       var(--kg-paper-0);
  --kg-surface-sunk:  var(--kg-paper-100);
  --kg-surface-muted: var(--kg-paper-200);
  --kg-line:          var(--kg-paper-300);
  --kg-line-strong:   var(--kg-cocoa-400);   /* 3.07:1 к фону — граница для не-текста */
  --kg-ink:           var(--kg-cocoa-800);   /* 12.6:1 */
  --kg-ink-2:         var(--kg-cocoa-600);   /* 6.5:1  */
  --kg-ink-3:         var(--kg-cocoa-500);   /* 4.15:1 — только крупный текст ≥18px */
  --kg-ink-inverse:   var(--kg-paper-0);
  --kg-outline:       var(--kg-cocoa-800);   /* контурные обводки 2–3px */

  --kg-brand:         var(--kg-berry-600);   /* фон CTA, белый текст 5.7:1 */
  --kg-brand-hover:   var(--kg-berry-700);
  --kg-brand-soft:    var(--kg-berry-50);
  --kg-brand-ink:     #FFFFFF;
  --kg-brand-text:    var(--kg-berry-600);   /* брендовый текст на фоне 5.2:1 */

  --kg-success:       #1F7A45;  --kg-success-soft: #E2F2E4;
  --kg-warning:       #8A5A00;  --kg-warning-soft: #FCEFCF;
  --kg-error:         #B42318;  --kg-error-soft:   #FBE3DE;  /* только для ошибок, никогда для имён */
  --kg-info:          #2860A8;  --kg-info-soft:    #E1ECF8;
  --kg-neutral-note:  var(--kg-cocoa-600); --kg-neutral-note-soft: var(--kg-paper-200); /* «возможный повтор» */

  --kg-name:          var(--kg-ink);         /* имена котов и пользователей: всегда «чернила», не красный */
  --kg-focus:         #2860A8;
  --kg-scrim:         rgba(43, 32, 26, .48);
  --kg-diecut:        #FFFFFF;               /* белый «вырубной» обвод стикера */

  /* ---------- Редкость: 4 уровня. Цвет + силуэт + символ + материал ---------- */
  /* Уровни разведены по светлоте: светлый → средний → тёмный → металл */
  --kg-r1-fill: #EDE4D6;  --kg-r1-ink: #5E4E40;  --kg-r1-edge: #9C8A74;   /* «Галька»  · круг · лапка · матовая бумага */
  --kg-r2-fill: #177A65;  --kg-r2-ink: #FFFFFF;  --kg-r2-edge: #0F5546;   /* «Нефрит»  · скругл. квадрат · две точки · сатин */
  --kg-r3-fill: #4B3FB8;  --kg-r3-ink: #FFFFFF;  --kg-r3-edge: #2C2380;   /* «Сапфир»  · звезда · ★ · фольга по контуру */
  --kg-r4-fill: #F3D27A;  --kg-r4-fill-2: #E9B949; --kg-r4-ink: #3A2A20; --kg-r4-edge: #8C6418; /* «Секрет» · кошачья голова · кошачий глаз · holo */
  --kg-holo: conic-gradient(from var(--kg-holo-angle, 0deg),
              #FFB3D1, #FFE29A, #B8F2C9, #A7D8FF, #D3B8FF, #FFB3D1);
  --kg-foil: linear-gradient(135deg, #2C2380 0%, #8C84E8 35%, #E6E2FF 50%, #8C84E8 65%, #2C2380 100%);
  --kg-satin: linear-gradient(160deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.10) 100%);

  /* ---------- Типографика ---------- */
  --kg-font-ui:      "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif;
  --kg-font-ui-th:   "IBM Plex Sans Thai", "IBM Plex Sans", system-ui, sans-serif;
  --kg-font-display: "Nunito", "Kanit", "IBM Plex Sans", system-ui, sans-serif;
  --kg-font-display-th: "Kanit", "Nunito", "IBM Plex Sans Thai", system-ui, sans-serif;

  /* Шкала кеглей (px) — мин. 12 только для подписей бейджей */
  --kg-fs-display: 40px;
  --kg-fs-title-1: 30px;
  --kg-fs-title-2: 24px;
  --kg-fs-title-3: 20px;
  --kg-fs-body-lg: 18px;
  --kg-fs-body:    16px;
  --kg-fs-label:   15px;
  --kg-fs-caption: 13px;
  --kg-fs-micro:   12px;

  --kg-fw-regular: 400;
  --kg-fw-medium:  500;
  --kg-fw-semi:    600;
  --kg-fw-bold:    700;
  --kg-fw-display: 800;

  /* Межстрочные интервалы зависят от письменности */
  --kg-lh-latn-display: 1.2;
  --kg-lh-latn-body:    1.4;
  --kg-lh-latn-tight:   1.3;
  --kg-lh-thai-display: 1.45;
  --kg-lh-thai-body:    1.6;
  --kg-lh-thai-tight:   1.5;
  /* Активные значения (переключаются по :lang) */
  --kg-lh-display: var(--kg-lh-latn-display);
  --kg-lh-body:    var(--kg-lh-latn-body);
  --kg-lh-tight:   var(--kg-lh-latn-tight);

  /* ---------- Отступы (база 4) ---------- */
  --kg-space-0_5: 2px;
  --kg-space-1:   4px;
  --kg-space-2:   8px;
  --kg-space-3:   12px;
  --kg-space-4:   16px;
  --kg-space-5:   20px;
  --kg-space-6:   24px;
  --kg-space-8:   32px;
  --kg-space-10:  40px;
  --kg-space-12:  48px;
  --kg-space-16:  64px;

  --kg-touch-min:    48px;   /* Android 48dp — основной рынок; покрывает iOS 44pt */
  --kg-touch-ios:    44px;
  --kg-touch-gap:    8px;
  --kg-cta-height-min: 56px; /* главная CTA: минимум, не фиксированная высота */

  /* ---------- Радиусы ---------- */
  --kg-radius-xs:    6px;
  --kg-radius-sm:    8px;
  --kg-radius-thumb: 12px;   /* миниатюра в сетке коллекции */
  --kg-radius-md:    16px;   /* карточка: нижняя граница */
  --kg-radius-card:  20px;
  --kg-radius-lg:    24px;   /* карточка: верхняя граница, sheet */
  --kg-radius-pill:  999px;

  /* ---------- Обводки ---------- */
  --kg-stroke-hair:    1px;
  --kg-stroke:         2px;  /* контурная обводка по умолчанию */
  --kg-stroke-strong:  3px;
  --kg-diecut-sm:      6px;  /* «вырубной» обвод в миниатюре */
  --kg-diecut-md:      8px;
  --kg-diecut-lg:      10px; /* обвод на reveal и share */
  --kg-focus-ring:     3px;

  /* ---------- Тени (тёплые, на основе cocoa) ---------- */
  --kg-shadow-1: 0 1px 2px rgba(58,42,32,.10), 0 1px 1px rgba(58,42,32,.06);
  --kg-shadow-2: 0 4px 12px -2px rgba(58,42,32,.14), 0 2px 4px rgba(58,42,32,.06);
  --kg-shadow-3: 0 12px 28px -8px rgba(58,42,32,.24), 0 4px 8px rgba(58,42,32,.08);
  --kg-shadow-sticker: drop-shadow(0 6px 10px rgba(58,42,32,.22)) drop-shadow(0 1px 1px rgba(58,42,32,.18));
  --kg-shadow-press: 0 2px 0 var(--kg-outline); /* «стикерная» подложка кнопки */

  /* ---------- Текстура бумаги (grain) ---------- */
  --kg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --kg-grain-opacity: .07;

  /* ---------- Анимация ---------- */
  --kg-dur-instant: 100ms;
  --kg-dur-fast:    150ms;   /* нажатие, hover, focus */
  --kg-dur-base:    200ms;   /* чипы, переключатели */
  --kg-dur-slow:    300ms;   /* появление элементов */
  --kg-dur-move:    400ms;   /* sheet, смена экранов (максимум для UI) */
  --kg-exit-ratio:  .65;     /* выход = 60–70% от входа */
  --kg-stagger:     40ms;    /* шаг для списков */

  --kg-ease-out:    cubic-bezier(.2, .8, .2, 1);    /* вход */
  --kg-ease-in:     cubic-bezier(.4, 0, 1, 1);      /* выход */
  --kg-ease-inout:  cubic-bezier(.4, 0, .2, 1);
  --kg-ease-sticker: cubic-bezier(.34, 1.45, .64, 1); /* «пружинка» стикера, только для вознаграждения */

  /* Reveal: сначала свечение сообщает уровень, затем появляется кот */
  --kg-reveal-1-glow: 300ms;  --kg-reveal-1-total: 700ms;
  --kg-reveal-2-glow: 450ms;  --kg-reveal-2-total: 1000ms;
  --kg-reveal-3-glow: 650ms;  --kg-reveal-3-total: 1400ms;
  --kg-reveal-4-glow: 900ms;  --kg-reveal-4-total: 2000ms;
  --kg-reveal-reduced: 200ms; /* Reduce Motion: только смена прозрачности */

  /* ---------- Слои ---------- */
  --kg-z-base: 0;  --kg-z-sticky: 10;  --kg-z-overlay: 40;  --kg-z-sheet: 50;  --kg-z-toast: 60;
}

/* Межстрочные интервалы для тайского */
:lang(th) {
  --kg-lh-display: var(--kg-lh-thai-display);
  --kg-lh-body:    var(--kg-lh-thai-body);
  --kg-lh-tight:   var(--kg-lh-thai-tight);
  --kg-font-ui:      var(--kg-font-ui-th);
  --kg-font-display: var(--kg-font-display-th);
}

/* ---------- Тёмная тема ---------- */
/* Ручной [data-theme="dark"] ниже дублирует этот блок: держать синхронно. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --kg-bg: var(--kg-night-900);
    --kg-surface: var(--kg-night-800);
    --kg-surface-sunk: #241C16;
    --kg-surface-muted: var(--kg-night-700);
    --kg-line: var(--kg-night-600);
    --kg-line-strong: #8E7B69;
    --kg-ink: #F6EDE1;
    --kg-ink-2: #C9B6A3;
    --kg-ink-3: #A8937F;
    --kg-ink-inverse: var(--kg-night-900);
    --kg-outline: #E8D5C0;
    --kg-brand: var(--kg-berry-300);
    --kg-brand-hover: #FF94B7;
    --kg-brand-soft: #3D1E2A;
    --kg-brand-ink: var(--kg-berry-900);
    --kg-brand-text: var(--kg-berry-300);
    --kg-success: #6CCB8A; --kg-success-soft: #1F3326;
    --kg-warning: #F0C75E; --kg-warning-soft: #3A2E14;
    --kg-error:   #FF8A7A; --kg-error-soft:   #3D1F1A;
    --kg-info:    #8CB8F0; --kg-info-soft:    #1C2A3D;
    --kg-neutral-note: #C9B6A3; --kg-neutral-note-soft: var(--kg-night-700);
    --kg-focus: #8CB8F0;
    --kg-scrim: rgba(0,0,0,.6);
    --kg-r1-fill: #4A3D33; --kg-r1-ink: #F6EDE1; --kg-r1-edge: #A8937F;
    --kg-r2-fill: #6FD3B8; --kg-r2-ink: #0F3D33; --kg-r2-edge: #A8EAD7;
    --kg-r3-fill: #5446C8; --kg-r3-ink: #FFFFFF; --kg-r3-edge: #A79BFF;
    --kg-r4-fill: #F0C75E; --kg-r4-fill-2: #D9A63A; --kg-r4-ink: #2B201A; --kg-r4-edge: #FFE6A3;
    --kg-shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --kg-shadow-2: 0 4px 12px -2px rgba(0,0,0,.5);
    --kg-shadow-3: 0 12px 28px -8px rgba(0,0,0,.6);
    --kg-grain-opacity: .05;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --kg-bg: var(--kg-night-900);
  --kg-surface: var(--kg-night-800);
  --kg-surface-sunk: #241C16;
  --kg-surface-muted: var(--kg-night-700);
  --kg-line: var(--kg-night-600);
  --kg-line-strong: #8E7B69;
  --kg-ink: #F6EDE1;
  --kg-ink-2: #C9B6A3;
  --kg-ink-3: #A8937F;
  --kg-ink-inverse: var(--kg-night-900);
  --kg-outline: #E8D5C0;
  --kg-brand: var(--kg-berry-300);
  --kg-brand-hover: #FF94B7;
  --kg-brand-soft: #3D1E2A;
  --kg-brand-ink: var(--kg-berry-900);
  --kg-brand-text: var(--kg-berry-300);
  --kg-success: #6CCB8A; --kg-success-soft: #1F3326;
  --kg-warning: #F0C75E; --kg-warning-soft: #3A2E14;
  --kg-error:   #FF8A7A; --kg-error-soft:   #3D1F1A;
  --kg-info:    #8CB8F0; --kg-info-soft:    #1C2A3D;
  --kg-neutral-note: #C9B6A3; --kg-neutral-note-soft: var(--kg-night-700);
  --kg-focus: #8CB8F0;
  --kg-scrim: rgba(0,0,0,.6);
  --kg-r1-fill: #4A3D33; --kg-r1-ink: #F6EDE1; --kg-r1-edge: #A8937F;
  --kg-r2-fill: #6FD3B8; --kg-r2-ink: #0F3D33; --kg-r2-edge: #A8EAD7;
  --kg-r3-fill: #5446C8; --kg-r3-ink: #FFFFFF; --kg-r3-edge: #A79BFF;
  --kg-r4-fill: #F0C75E; --kg-r4-fill-2: #D9A63A; --kg-r4-ink: #2B201A; --kg-r4-edge: #FFE6A3;
  --kg-shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --kg-shadow-2: 0 4px 12px -2px rgba(0,0,0,.5);
  --kg-shadow-3: 0 12px 28px -8px rgba(0,0,0,.6);
  --kg-grain-opacity: .05;
}

/* ---------- Схема камеры: улица, солнце, ~7:1 и выше ---------- */
[data-scheme="camera"] {
  --kg-cam-scrim:     rgba(22, 17, 13, .86);  /* плотная подложка под текстом */
  --kg-cam-ink:       #FFFFFF;                /* 18.7:1 на подложке */
  --kg-cam-ink-2:     #F4EBDC;
  --kg-cam-accent:    #FFE14D;                /* 14.4:1 — рамка «кот найден» */
  --kg-cam-warn:      #FFB35C;
  --kg-cam-idle:      rgba(255,255,255,.92);
  --kg-cam-shutter:   #FFFFFF;
  --kg-cam-shutter-ring: var(--kg-berry-300);
}

/* ---------- Режим уважения (национальный траур) ----------
   Приглушает бренд и праздничные акценты, отключает праздничную анимацию.
   Не чёрно-белая гамма: тёплые приглушённые тона. */
[data-respect="on"] {
  --kg-brand: #7A6A5E;
  --kg-brand-hover: #685A4F;
  --kg-brand-soft: #EEE6DC;
  --kg-brand-ink: #FFFFFF;
  --kg-brand-text: #6B5446;
  --kg-holo: linear-gradient(135deg, #E9DFD2, #D9CCBB);
  --kg-day-sun: #A8937F; --kg-day-mon: #A8937F; --kg-day-tue: #A8937F; --kg-day-wed: #A8937F;
  --kg-day-thu: #A8937F; --kg-day-fri: #A8937F; --kg-day-sat: #A8937F;
  --kg-ease-sticker: var(--kg-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --kg-dur-fast: 0ms; --kg-dur-base: 0ms; --kg-dur-slow: 120ms; --kg-dur-move: 160ms;
    --kg-stagger: 0ms;
    --kg-ease-sticker: var(--kg-ease-out);
  }
}