/*
 * Дизайн-токены системы Нарека Карапетяна.
 * Источник: UI-UX Pro Max, палитра «Luxury/Premium Brand» (design-system/narek-karapetyan/MASTER.md),
 * отступления записаны в design-system/narek-karapetyan/DECISIONS.md.
 * Компоненты используют только семантические токены, не сырые hex.
 */

:root {
  /* Цвет: светлая тема (основная) */
  --color-primary: #1C1917;
  --color-on-primary: #FFFFFF;
  --color-secondary: #44403C;
  --color-on-secondary: #FFFFFF;
  --color-accent: #A16207;
  --color-on-accent: #FFFFFF;
  --color-accent-soft: #F5EBD7;
  --color-on-accent-soft: #713F12;
  --color-background: #FAFAF9;
  --color-foreground: #0C0A09;
  --color-card: #FFFFFF;
  --color-card-foreground: #0C0A09;
  --color-muted: #F0EEEB;
  --color-muted-foreground: #57534E;
  --color-border: #D6D3D1;
  --color-border-strong: #A8A29E;
  --color-destructive: #B91C1C;
  --color-on-destructive: #FFFFFF;
  --color-destructive-soft: #FEF2F2;
  --color-success: #166534;
  --color-success-soft: #F0FDF4;
  --color-warning: #92400E;
  --color-warning-soft: #FFFBEB;
  --color-ring: #1C1917;
  --color-scrim: rgba(12, 10, 9, 0.56);
  --color-chrome: rgba(250, 250, 249, 0.86);

  /* Типографика */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 0.8125rem;   /* 13px — подписи, не меньше 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px — основной текст и поля ввода (без зума iOS) */
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: clamp(2.5rem, 7vw, 4.25rem);
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --tracking-display: -0.01em;
  --tracking-caps: 0.08em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Отступы: шаг 4px, просторная плотность */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --container: 72rem;
  --container-narrow: 44rem;

  /* Форма */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border: 1px solid var(--color-border);
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06);
  --shadow-md: 0 8px 24px rgba(28, 25, 23, 0.08);
  --shadow-lg: 0 24px 56px rgba(28, 25, 23, 0.14);

  /* Взаимодействие */
  --tap-min: 48px;              /* зона нажатия: не меньше 44px, целимся в 48 */
  --focus-ring: 0 0 0 3px var(--color-background), 0 0 0 5px var(--color-ring);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Оболочка */
  --header-height: 60px;
  --bottom-nav-height: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --z-header: 40;
  --z-bottom-nav: 40;
  --z-sticky-cta: 30;
  --z-overlay: 60;
  --z-toast: 70;
}

/* Тёмная поверхность: премиальная витрина, первый экран, подвал. Задаётся классом на блоке. */
.theme-dark {
  --color-primary: #FAFAF9;
  --color-on-primary: #1C1917;
  --color-secondary: #D6D3D1;
  --color-on-secondary: #1C1917;
  --color-accent: #E7B866;
  --color-on-accent: #1C1917;
  --color-accent-soft: #3A2A10;
  --color-on-accent-soft: #F5DFB5;
  --color-background: #141211;
  --color-foreground: #FAFAF9;
  --color-card: #1F1C1A;
  --color-card-foreground: #FAFAF9;
  --color-muted: #292524;
  --color-muted-foreground: #C4BEB8;
  --color-border: #44403C;
  --color-border-strong: #78716C;
  --color-destructive: #FCA5A5;
  --color-on-destructive: #1C1917;
  --color-destructive-soft: #3B1414;
  --color-success: #86EFAC;
  --color-success-soft: #12301C;
  --color-warning: #FCD34D;
  --color-warning-soft: #3A2A10;
  --color-ring: #FAFAF9;
  --color-chrome: rgba(20, 18, 17, 0.86);
  background-color: var(--color-background);
  color: var(--color-foreground);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}