/* ==========================================================================
   ТОКЕНЫ — единственное место, где живут цвета, размеры и шрифты.
   Направление «Тихая роскошь»: тёплая нейтраль, какао и молочный нюд.
   Два слоя: палитра (сырые цвета) → семантика (--c-*), которую
   переопределяет тёмная тема .t-dark. Компоненты используют только --c-*.
   Контраст проверен расчётом (WCAG): см. комментарии у цветов текста.
   ========================================================================== */

:root {
  /* --- палитра --- */
  --pal-ink: #2e211d;         /* какао/эспрессо — тёмные секции */
  --pal-ink-deep: #1f1613;    /* глубже — фон вокруг колонки, градиент под фото */
  --pal-cream: #f6efea;       /* молочный нюд — светлые секции */
  --pal-paper: #ede3dc;       /* подложки на светлом */
  --pal-rose: #d9a89c;        /* пудровая роза — акцент на тёмном (на ink 7.4:1) */
  --pal-rose-deep: #86504a;   /* роза для текста на светлом (cream 5.7:1, paper 5.1:1) */
  --pal-text: #2b2220;        /* текст на светлом (13.6:1) */
  --pal-text-muted: #6b5d58;  /* вторичный на светлом (cream 5.5:1, paper 5.0:1) */
  --pal-cream-muted: #bfb0a8; /* вторичный на тёмном (7.4:1) */

  /* --- семантика: светлая тема (по умолчанию) --- */
  --c-bg: var(--pal-cream);
  --c-surface: var(--pal-paper);
  --c-fg: var(--pal-text);
  --c-heading: var(--pal-ink);
  --c-muted: var(--pal-text-muted);
  --c-accent: var(--pal-rose-deep);
  --c-line: rgba(46, 33, 29, 0.14);
  --c-line-strong: rgba(46, 33, 29, 0.4);  /* контур ghost-кнопок */
  --c-btn-bg: var(--pal-ink);
  --c-btn-fg: var(--pal-cream);

  --color-backdrop: rgba(31, 22, 19, 0.55);
  --color-bar: rgba(31, 22, 19, 0.9);
  --hero-fade: linear-gradient(180deg, rgba(31, 22, 19, 0.5) 0%, rgba(31, 22, 19, 0) 20%,
    rgba(31, 22, 19, 0) 42%, rgba(31, 22, 19, 0.9) 82%, var(--pal-ink) 100%);
  --photo-tint: rgba(31, 22, 19, 0.06); /* лёгкая вуаль на фото работ, чтобы они «сели» в палитру */
  /* едва заметная фактура бумаги */
  --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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: 0.05;

  /* --- типографика --- */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-label: 0.6875rem;   /* 11px — капс-метки */
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.5rem;         /* подпись, адрес, цены в шторках */
  --fs-menu: 1.3125rem;    /* строки прайса и контактов */
  --fs-xl: 2rem;           /* цитаты */
  --fs-h2: clamp(2.25rem, 9vw, 3rem);
  --fs-h1: clamp(2.875rem, 13vw, 4.5rem);
  --fs-avatar: 2.75rem;    /* инициал в заглушке аватара */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-display: 1.02;
  --lh-snug: 1.35;
  --lh-base: 1.65;
  --tracking-label: 0.24em;
  --tracking-brand: 0.42em;
  --tracking-display: -0.01em;

  /* --- отступы (шкала 4px) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;
  --section-py: var(--space-9);
  --gutter: 24px;
  --gutter-wide: 56px;

  /* --- формы --- */
  --radius-pill: 8px;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-round: 50%;
  --radius-arch: 999px 999px var(--radius-sm) var(--radius-sm);
  --hairline: 1px solid var(--c-line);
  --shadow-float: 0 18px 40px rgba(31, 22, 19, 0.28);

  /* --- размеры элементов --- */
  --avatar-sm: 36px;
  --avatar-md: 64px;
  --avatar-lg: 112px;
  --icon-size: 20px;
  --tap-min: 48px;
  --dot-size: 6px;
  --dot-size-active: 22px;
  --sheet-handle-w: 40px;
  --sheet-handle-h: 4px;
  --rule-w: 32px;          /* короткая черта у номера секции */
  --focus-ring: 2px;
  --focus-offset: 3px;

  /* --- лэйаут --- */
  --container-max: 800px;
  --hero-h: 100svh;        /* обложка — ровно на экран, без «подглядывающей» секции */
  --hero-min-h: 560px;
  --arch-max: 360px;
  --slide-w: 86%;
  --slide-w-wide: 48%;
  --slide-w-quote: 100%;
  --slide-w-work: 78%;     /* карточка работы: видно край следующей — понятно, что листается */
  --slide-w-work-wide: 44%;
  --work-ratio: 3 / 4;     /* пропорция фото работ (исходники 962×1280) */
  --dots-max: 8;           /* больше слайдов — вместо точек счётчик «3 / 24» (читает JS) */
  --bar-inset: 12px;       /* отступ плавающей панели от краёв */
  --bar-offset: calc(var(--tap-min) + var(--space-3) * 2 + var(--bar-inset) * 2 + env(safe-area-inset-bottom, 0px));
  --bar-blur: 14px;
  /* брейкпоинт 640px продублирован в @media — переменные там не работают */

  /* --- движение --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 300ms;
  --dur-slow: 450ms;
  --dur-reveal: 1100ms;
  --dur-hero: 2400ms;
  --dur-fade: 1600ms;      /* смена фото на обложке */
  --hero-interval: 5500;   /* сколько мс показывается одно фото обложки (читает JS) */
  --hero-zoom: 1.06;       /* фото обложки медленно «наезжает», пока показано */
  --reveal-shift: 18px;
  --reveal-step: 110ms;
  --press: 0.97;
  --parallax: 0.25;        /* скорость фото обложки относительно скролла */
  --bar-reveal-at: 80;     /* панель появляется после стольких px прокрутки (читает JS) */
  --hint-delay: 2500;      /* через сколько мс стрелка обложки начинает «дышать» (читает JS) */
  --hint-shift: 5px;       /* амплитуда покачивания стрелки */
  --dur-hint: 1800ms;
}

/* --- тёмная тема секции --- */
.t-dark {
  --c-bg: var(--pal-ink);
  --c-surface: rgba(246, 239, 234, 0.06);
  --c-fg: var(--pal-cream);
  --c-heading: var(--pal-cream);
  --c-muted: var(--pal-cream-muted);
  --c-accent: var(--pal-rose);
  --c-line: rgba(246, 239, 234, 0.2);
  --c-line-strong: rgba(246, 239, 234, 0.42);
  /* переобъявляем: составной токен вычисляется там, где объявлен, иначе линия останется тёмной */
  --hairline: 1px solid var(--c-line);
  --c-btn-bg: var(--pal-rose);
  --c-btn-fg: var(--pal-ink);
}