/* OpenLove Mini App — слой темы. ЕДИНСТВЕННОЕ место с конкретными значениями стиля.
   Смена дизайна = замена этого файла (и при желании components.css); логика не трогается.
   Основа — временные токены «тёплого минимализма» веб-клиента (frontend/app/styles.css).
   Тема: data-theme="light|dark" ставит tg.js по Telegram.WebApp.colorScheme. */

:root {
  /* цвета */
  --c-bg: #F6EFE4;
  --c-panel: #FDF8EF;
  --c-panel-2: #FBF3E8;
  --c-line: #E7DBC8;
  --c-ink: #2C221B;
  --c-ink-soft: #5C4B3D;
  --c-muted: #7A6A5D;
  --c-accent: #A23528;
  --c-accent-2: #C45C3C;
  --c-on-accent: #FFFFFF;
  --c-bubble-them: #F0E5D8;
  --c-bubble-me: #A23528;
  --c-on-bubble-me: #FFFFFF;
  --c-bubble-host: #EFE3CF;      /* реплики импрессарио / интервьюера */
  --c-skeleton: #EDE2D2;
  --c-skeleton-hi: #F7EFE3;
  --c-overlay: rgba(28, 20, 15, .55);
  --c-placeholder: #E9DCC8;      /* заглушка вместо фото — плоская, без блюра */
  --c-danger: #A23528;
  --c-ok: #4E7A4A;

  /* шрифты — только системные (внешние шрифты не грузим, п. 1.3) */
  --f-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-serif: Georgia, "Times New Roman", serif;
  --fs-xs: 12px;
  --fs-s: 13.5px;
  --fs-m: 15.5px;
  --fs-l: 18px;
  --fs-xl: 24px;
  --fs-xxl: 32px;
  --fw-regular: 400;
  --fw-bold: 600;
  --lh: 1.5;
  --lh-tight: 1.15;
  --ls-caps: .06em;

  /* прозрачности состояний */
  --op-disabled: .5;
  --op-pending: .6;
  --op-dim: .3;
  --op-soft: .8;

  /* отступы и размеры */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 32px;
  --sp-7: 48px;
  --size-avatar: 44px;
  --size-photo: 220px;
  --size-tab: 58px;
  --size-input: 44px;
  --w-max: 640px;
  --bubble-max: 82%;
  --border: 1px;

  /* радиусы */
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 20px;
  --r-pill: 999px;

  /* тени */
  --shadow-card: 0 1px 0 rgba(44, 34, 27, .04), 0 6px 18px rgba(44, 34, 27, .06);
  --shadow-sheet: 0 -8px 30px rgba(44, 34, 27, .18);

  /* анимации */
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
  --dur-shimmer: 1400ms;
  --dur-typing: 1100ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --shift-screen: 28px;          /* сдвиг экрана при переходе */
  --shift-card: 12px;            /* сдвиг карточки при появлении */
  --stagger: 60ms;               /* задержка между карточками */
}

:root[data-theme="dark"] {
  --c-bg: #1B1512;
  --c-panel: #241C17;
  --c-panel-2: #2A211A;
  --c-line: #3A2E25;
  --c-ink: #F1E7DA;
  --c-ink-soft: #CDBBA9;
  --c-muted: #A8927E;
  --c-accent: #D65441;
  --c-accent-2: #E0765E;
  --c-on-accent: #1B1512;
  --c-bubble-them: #2A211A;
  --c-bubble-me: #B8402F;
  --c-on-bubble-me: #FFFFFF;
  --c-bubble-host: #30251D;
  --c-skeleton: #2A211A;
  --c-skeleton-hi: #352A21;
  --c-overlay: rgba(0, 0, 0, .6);
  --c-placeholder: #30251D;
  --c-danger: #E0765E;
  --c-ok: #7FB079;
  --shadow-card: 0 1px 0 rgba(0, 0, 0, .2), 0 6px 18px rgba(0, 0, 0, .25);
  --shadow-sheet: 0 -8px 30px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --shift-screen: 0px;
    --shift-card: 0px;
    --stagger: 0ms;
  }
}