/* tokens.css — Selfie Studio «Проявка», палитра «Смесь» (утверждена 16.10.2026).
   Единственный источник цветов, шрифтов, радиусов, отступов, теней и движения.
   Поверхности: по умолчанию «бумага» (каталог, кабинет, чекаут, документы); [data-surface="stage"] — тёплая тёмная сцена (первый экран, проявка, просмотр кадров).
   Палитра мягкая и тёплая: без чистого чёрного, без ярко-розового и фиолетового, без градиентов. */
:root {
  /* ---- primitives: paper (пудровая бумага) ---- */
  --paper-0: #F7F0EE;             /* фон */
  --paper-1: #FFFAF8;             /* карточки и поля */
  --paper-line: #E9DCD7;          /* линия 1px */
  --paper-line-strong: #D6C5BE;   /* рамки полей, разделители */
  --ink: #332A25;                 /* текст, 12.5:1 на paper-0 */
  --ink-muted: #6E625C;           /* вторичный текст, 5.2:1 на paper-0 */
  --cocoa-btn: #4A352B;           /* главная кнопка на бумаге */
  --on-cocoa: #FFF9F1;            /* текст на cocoa-btn, 10.9:1 */
  /* ---- primitives: stage (сцена какао) ---- */
  --stage-0: #3B302B;             /* фон сцены */
  --stage-1: #473A34;             /* панели и шторки на сцене */
  --stage-2: #54453E;             /* кнопки второго плана на сцене */
  --stage-line: #5E4E46;          /* линия 1px на сцене */
  --stage-text: #FBF4EF;          /* текст, 11.7:1 на stage-0 */
  --stage-muted: #CBBCB3;         /* вторичный текст, 6.9:1 на stage-0 */
  /* ---- accent «софит» (персиковый) ---- */
  --peach: #E6B49B;               /* главная кнопка на сцене, активные элементы; 6.9:1 к stage-0 */
  --on-peach: #3A2923;            /* текст на peach, 7.5:1 */
  --peach-deep: #9C5B42;          /* ссылки и акцентный текст на бумаге, 4.7:1 */
  --peach-ring: #B0705A;          /* фокус и активная обводка на бумаге, 3.5:1 (нетекст) */
  /* ---- status ---- */
  --ok-mark: #52D39B;   --err-mark: #FF6B6B;   /* яркие метки статусов (точки, заливки, рамки) на обеих поверхностях — выбор владельца 16.10 */
  --ok-stage: #52D39B;  --ok-paper: #1F7A4D;   /* цвет ТЕКСТА статуса: на бумаге тёмный, чтобы читался */
  --err-stage: #FF6B6B; --err-paper: #C0311C;
  /* ---- semantic (paper by default) ---- */
  --bg: var(--paper-0);
  --surface: var(--paper-1);
  --line: var(--paper-line);
  --line-strong: var(--paper-line-strong);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --btn-primary-bg: var(--cocoa-btn);     /* на бумаге главная кнопка — какао */
  --btn-primary-text: var(--on-cocoa);
  --accent: var(--peach);
  --accent-text: var(--on-peach);
  --accent-link: var(--peach-deep);
  --ring: var(--peach-ring);
  --ok: var(--ok-paper);
  --err: var(--err-paper);
  --btn-quiet-bg: var(--paper-line);       /* кнопка второго плана на бумаге */
  --btn-quiet-text: var(--ink);
  --vignette: linear-gradient(to top, rgba(59,48,43,.85) 0%, rgba(59,48,43,.45) 40%, rgba(59,48,43,0) 70%); /* только поверх фото под текст */
  /* ---- type ---- */
  --font-display: "Unbounded", "Golos Text", system-ui, sans-serif;   /* только H1/H2, цены, баланс, таймер */
  --font-text: "Golos Text", "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);   /* 28 → 52 */
  --fs-h2: clamp(1.375rem, 1.05rem + 1.5vw, 2.25rem); /* 22 → 36 */
  --fs-h3: 1.25rem;    /* 20 */
  --fs-lead: 1.125rem; /* 18: названия сюжетов (600), подзаголовок на десктопе 1.25rem */
  --fs-body: 1rem;     /* 16 */
  --fs-btn: 1.0625rem; /* 17 */
  --fs-sm: 0.875rem;   /* 14 */
  --fs-xs: 0.8125rem;  /* 13: подписи, согласие */
  --fs-cap: 0.75rem;   /* 12: капс-рубрики, трекинг .08em */
  --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.5;
  --tracking-display: -0.01em; --tracking-caps: 0.08em;
  --num: "tnum" 1, "lnum" 1;      /* font-feature-settings для цен и таймеров */
  /* ---- radius ---- */
  --r-xs: 8px;    /* миниатюры */
  --r-sm: 10px;   /* чипы, бейджи */
  --r-md: 14px;   /* кнопки, поля */
  --r-lg: 20px;   /* карточки, плитки */
  --r-xl: 24px;   /* карточка сцены на десктопе */
  --r-sheet: 28px;/* верхние углы шторок */
  --r-shutter: 999px; /* единственный круг — затвор 64px */
  /* ---- spacing (4px base) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --gutter: 16px;            /* боковое поле на телефоне */
  --col-app: 640px;          /* центральная колонна приложения */
  --container: 1120px;       /* лендинг и каталог на десктопе */
  --rail-w: 72px;            /* левый рейл; подписи при ≥1440px */
  --tabbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tap-min: 44px;
  --chip-before-w: 56px; --chip-before-h: 72px;
  --shutter-size: 64px;
  /* ---- shadows ---- */
  --shadow-card: 0 1px 2px rgba(51,42,37,.05), 0 8px 24px rgba(51,42,37,.06);  /* только липкие панели и карточки на бумаге при необходимости */
  --shadow-sheet: 0 -8px 32px rgba(59,48,43,.18);
  --shadow-sheet-stage: 0 -8px 32px rgba(20,14,11,.40);
  --shadow-chip: 0 2px 8px rgba(36,28,24,.35);  /* чип «до» поверх фото */
  /* ---- motion ---- */
  --dur-fast: 120ms;     /* hover, press */
  --dur-base: 200ms;     /* чип «до», фокус карточки */
  --dur-sheet: 240ms;    /* шторки */
  --dur-develop: 600ms;  /* проявка: размытая заготовка → кадр */
  --dur-stagger: 300ms;  /* шаг проявки, если кадры пришли пачкой */
  --dur-story: 5000ms;   /* сторис-сегмент */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --press-scale: .94;
  /* ---- z-index ---- */
  --z-rail: 30; --z-tabbar: 40; --z-sticky: 45; --z-sheet: 50; --z-toast: 60;
}

/* Тёплая тёмная сцена: первый экран, проявка, просмотр кадров */
[data-surface="stage"] {
  --bg: var(--stage-0);
  --surface: var(--stage-1);
  --line: var(--stage-line);
  --line-strong: #6E5C53;
  --text: var(--stage-text);
  --text-muted: var(--stage-muted);
  --btn-primary-bg: var(--peach);          /* на сцене главная кнопка — персиковая */
  --btn-primary-text: var(--on-peach);
  --accent: var(--peach);
  --accent-text: var(--on-peach);
  --accent-link: var(--peach);
  --ring: var(--peach);
  --ok: var(--ok-stage);
  --err: var(--err-stage);
  --btn-quiet-bg: var(--stage-2);
  --btn-quiet-text: var(--stage-text);
  --shadow-sheet: var(--shadow-sheet-stage);
  color-scheme: dark;
}

/* Бумага внутри сцены (например, шторка входа поверх тёмного фото): возвращает светлые токены */
[data-surface="paper"] {
  --bg: var(--paper-0);
  --surface: var(--paper-1);
  --line: var(--paper-line);
  --line-strong: var(--paper-line-strong);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --btn-primary-bg: var(--cocoa-btn);
  --btn-primary-text: var(--on-cocoa);
  --accent: var(--peach);
  --accent-text: var(--on-peach);
  --accent-link: var(--peach-deep);
  --ring: var(--peach-ring);
  --ok: var(--ok-paper);
  --err: var(--err-paper);
  --btn-quiet-bg: var(--paper-line);
  --btn-quiet-text: var(--ink);
  --shadow-sheet: 0 -8px 32px rgba(59,48,43,.18);
  color-scheme: light;
}

/* Необязательная системная тёмная тема для кабинета (после MVP): наследует токены сцены */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--stage-0); --surface: var(--stage-1); --line: var(--stage-line); --line-strong: #6E5C53;
    --text: var(--stage-text); --text-muted: var(--stage-muted);
    --btn-primary-bg: var(--peach); --btn-primary-text: var(--on-peach);
    --accent-link: var(--peach); --ring: var(--peach); --ok: var(--ok-stage); --err: var(--err-stage);
    --btn-quiet-bg: var(--stage-2); --btn-quiet-text: var(--stage-text);
  }
}
:root[data-theme="dark"] {
  --bg: var(--stage-0); --surface: var(--stage-1); --line: var(--stage-line); --line-strong: #6E5C53;
  --text: var(--stage-text); --text-muted: var(--stage-muted);
  --btn-primary-bg: var(--peach); --btn-primary-text: var(--on-peach);
  --accent-link: var(--peach); --ring: var(--peach); --ok: var(--ok-stage); --err: var(--err-stage);
  --btn-quiet-bg: var(--stage-2); --btn-quiet-text: var(--stage-text);
}

html { background: var(--bg); color: var(--text); font-family: var(--font-text); font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: var(--lh-body); min-height: 100dvh; padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
h1, h2 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-display); text-wrap: balance; }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); }
.price, .balance, .timer { font-family: var(--font-display); font-weight: 600; font-feature-settings: var(--num); }
.caps { font-size: var(--fs-cap); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-sheet: 0ms; --dur-develop: 0ms; --dur-stagger: 0ms; --press-scale: 1; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}