/* Философия шоколада — тема мини-приложения.
   ЕДИНСТВЕННОЕ место с цветами, шрифтами и радиусами (история 29, Решения §13).
   Экраны и стили берут только переменные отсюда — в app.css и js/ нет ни одного цвета.

   Как «добавить или убавить»:
   - цвет бренда — поменять значение в блоке «Палитра брендбука»;
   - роль (фон, текст, акцент…) — в блоке светлой или тёмной темы;
   - Loew Next: положить woff2 в assets/fonts/ и раскомментировать @font-face ниже —
     токен --f-ui уже ставит его первым, Montserrat останется запасным. */

/* ---------- Шрифты (локально, OFL — лицензии в assets/fonts/) ---------- */

/* @font-face { font-family: 'Loew Next'; font-weight: 400; font-display: swap; src: url('assets/fonts/loew-next-regular.woff2') format('woff2'); }
   @font-face { font-family: 'Loew Next'; font-weight: 500; font-display: swap; src: url('assets/fonts/loew-next-medium.woff2') format('woff2'); }
   @font-face { font-family: 'Loew Next'; font-weight: 600; font-display: swap; src: url('assets/fonts/loew-next-semibold.woff2') format('woff2'); } */

@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('assets/fonts/montserrat-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('assets/fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Infant'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/cormorant-infant-600-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Cormorant Infant'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/cormorant-infant-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Infant'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/cormorant-infant-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Infant'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/cormorant-infant-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Палитра брендбука, шрифты, радиусы ---------- */

:root {
  --brand-chocolate: #40170E;
  --brand-cream: #FEE2C1;
  --brand-orange: #E06B36;
  --brand-navy: #1F293D;
  --brand-salmon: #F08C78;
  --brand-beige: #D1B19B;
  --brand-terracotta: #B15E43;
  --brand-ochre: #B27E2C;

  --f-ui: 'Loew Next', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-display: 'Cormorant Infant', 'Cormorant', Georgia, 'Times New Roman', serif;
  --f-num: lining-nums tabular-nums;   /* font-variant-numeric для всех цифр */

  --r-card: 20px;
  --r-inner: 12px;
  --r-chip: 999px;
  --r-bar: 4px;
  --stamp-hole: 8px;                    /* радиус выреза «марки» (стр. 9 брендбука) */
  --stamp-step: 26px;                   /* шаг перфорации */
}

/* ---------- Светлая тема: светлый кремовый фон, тёмно-синий текст, оранжевый акцент ---------- */

:root, :root[data-theme="light"] {
  color-scheme: light;
  --c-bg: #FBF2E7;
  --c-surface: #FFFAF3;
  --c-surface-2: #F4E4D1;
  --c-ink: var(--brand-navy);
  --c-muted: #5A6275;
  --c-faint: #8A8C96;
  --c-line: #EBDAC6;
  --c-accent: var(--brand-orange);
  --c-accent-text: #B84F1D;
  --c-accent-soft: #FADCC8;
  --c-on-accent: var(--brand-chocolate);
  --c-good: #2F7A4F;
  --c-good-soft: #DCEBD8;
  --c-bad: #BA5020;
  --c-bad-soft: #FBDCCB;
  --c-on-status: #FFF8EF;

  --c-series-1: var(--brand-navy);
  --c-series-2: var(--brand-orange);
  --c-series-3: var(--brand-ochre);
  --c-series-4: var(--brand-terracotta);
  --c-series-5: var(--brand-salmon);
  --c-series-6: var(--brand-beige);
  --c-bar: var(--brand-navy);
  --c-bar-soft: #C8BCAE;
  --c-bar-sel: var(--brand-orange);
  --c-norm: var(--brand-orange);
  --c-track: #F1E3D2;

  --c-header-bg: var(--brand-navy);
  --c-header-ink: var(--brand-cream);
  --c-header-pattern: #28344D;

  --c-stamp-bg: var(--brand-cream);
  --c-stamp-ink: var(--brand-navy);
  --c-stamp-muted: #4F586C;
  --c-stamp-line: #EBC9A3;
  --c-stamp-good-bg: #2F7A4F;
  --c-stamp-good-ink: #FFF8EF;
  --c-stamp-bad-bg: #BA5020;
  --c-stamp-bad-ink: #FFF8EF;

  --c-demo-bg: var(--brand-orange);
  --c-demo-ink: var(--brand-chocolate);
  --c-stale-bg: #F4DFB6;
  --c-stale-ink: #5E400C;

  --c-splash-bg: var(--brand-cream);
  --c-splash-ink: var(--brand-navy);
  --c-splash-leaf: var(--brand-navy);
  --c-splash-pattern: #F6D2AA;

  --c-skeleton: #F0E1CE;
  --c-skeleton-hi: #F9EFE3;
  --c-nav-bg: #FFFAF3;
  --c-overlay: rgba(31, 41, 61, 0.06);
  --shadow-card: 0 1px 1px rgba(64, 23, 14, 0.04), 0 10px 24px -18px rgba(64, 23, 14, 0.35);
  --shadow-nav: 0 -8px 24px -20px rgba(64, 23, 14, 0.45);

  /* цвета для шапки и фона самого Telegram (setHeaderColor/setBackgroundColor) — только hex */
  --tg-header: #1F293D;
  --tg-bg: #FBF2E7;
  --tg-bottom: #FFFAF3;
}

/* ---------- Тёмная тема Telegram: шоколадный фон, кремовый текст, оранжевый акцент ---------- */

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #2A0E08;
  --c-surface: var(--brand-chocolate);
  --c-surface-2: #52231A;
  --c-ink: var(--brand-cream);
  --c-muted: var(--brand-beige);
  --c-faint: #A7836F;
  --c-line: #5A2A1E;
  --c-accent: var(--brand-orange);
  --c-accent-text: #F59A6B;
  --c-accent-soft: #6A2A14;
  --c-on-accent: #2A0E08;
  --c-good: #93CFA0;
  --c-good-soft: #23402B;
  --c-bad: #F59A6B;
  --c-bad-soft: #6A2A14;
  --c-on-status: #2A0E08;

  --c-series-1: var(--brand-cream);
  --c-series-2: var(--brand-orange);
  --c-series-3: var(--brand-ochre);
  --c-series-4: var(--brand-salmon);
  --c-series-5: var(--brand-beige);
  --c-series-6: var(--brand-terracotta);
  --c-bar: var(--brand-beige);
  --c-bar-soft: #6E3F2F;
  --c-bar-sel: var(--brand-orange);
  --c-norm: var(--brand-orange);
  --c-track: #55261B;

  --c-header-bg: var(--brand-chocolate);
  --c-header-ink: var(--brand-cream);
  --c-header-pattern: #4D1D13;

  --c-stamp-bg: var(--brand-orange);
  --c-stamp-ink: #2A0E08;
  --c-stamp-muted: #4A1A0D;
  --c-stamp-line: #C75A28;
  --c-stamp-good-bg: #1F4A2C;
  --c-stamp-good-ink: #E4F5E7;
  --c-stamp-bad-bg: #2A0E08;
  --c-stamp-bad-ink: var(--brand-cream);

  --c-demo-bg: var(--brand-orange);
  --c-demo-ink: #2A0E08;
  --c-stale-bg: #5C3F0E;
  --c-stale-ink: #F6DDA8;

  --c-splash-bg: #2A0E08;
  --c-splash-ink: var(--brand-cream);
  --c-splash-leaf: var(--brand-orange);
  --c-splash-pattern: #3A140C;

  --c-skeleton: #4A1D14;
  --c-skeleton-hi: #5A281D;
  --c-nav-bg: #34120B;
  --c-overlay: rgba(254, 226, 193, 0.06);
  --shadow-card: 0 1px 0 rgba(254, 226, 193, 0.03), 0 12px 28px -20px rgba(0, 0, 0, 0.8);
  --shadow-nav: 0 -10px 24px -18px rgba(0, 0, 0, 0.7);

  --tg-header: #40170E;
  --tg-bg: #2A0E08;
  --tg-bottom: #34120B;
}