/*
 * Design System: Cabinet — цвета с фото кабинета (assets/hero-cover.jpg)
 * Изумрудные кресла · латунь лампы · тёплые стены · дубовый пол · тауповый ковёр
 */

:root {
  /* ——— RGB channels (для rgba) ——— */
  --rgb-ink: 9, 28, 24;
  --rgb-emerald: 9, 64, 56;
  --rgb-brass: 190, 175, 128;
  --rgb-paper: 246, 240, 233;
  --rgb-glow: 217, 202, 183;
  --rgb-veil: 5, 12, 10;

  /* ——— Neutrals: стены, лён, дерево, ковёр ——— */
  --paper: #f6f0e9;
  --paper-deep: #ebe0d2;
  --paper-muted: #ded6ce;
  --panel: #fffcf8;
  --wood: #c5b098;
  --wood-deep: #af967a;
  --taupe: #c1af99;
  --glow: #d9cab7;
  --glow-deep: #d0c1af;

  /* ——— Text ——— */
  --ink: #091c18;
  --ink-soft: #364c3b;
  --muted: #6d6a4b;
  --muted-dark: #4c3d20;

  /* ——— Signature: бархат кресел ——— */
  --emerald: #0D4039;
  --emerald-deep: #05342f;
  --emerald-hover: #0b5248;
  --emerald-light: #364c3b;

  /* ——— Accent: латунь лампы и столика ——— */
  --brass: #beaf80;
  --brass-deep: #af8c5e;
  --brass-light: #dabb8f;
  --brass-hover: #c9b88e;

  /* ——— CTA: тёплый золотой блик (свет лампы) ——— */
  --accent: #af8c5e;
  --accent-hover: #be9d6e;
  --accent-text: #fffcf8; /* lettering on filled CTA only — not display type on dark bands */

  /* ——— Plant / sage (листва на фото) ——— */
  --sage: #b8c9bf;

  /* Legacy alias — кнопка записи (золото лампы, не терракот) */
  --coral: var(--accent);
  --coral-hover: var(--accent-hover);

  /* ——— Lines & overlays ——— */
  --line: rgba(var(--rgb-ink), .12);
  --line-strong: rgba(var(--rgb-ink), .22);
  --hero-veil: rgba(var(--rgb-veil), .55);
  --hero-text: var(--paper); /* light display/inscription on dark photo and dark bands */
  --hero-text-soft: rgba(var(--rgb-paper), .82);
  --hero-text-muted: rgba(var(--rgb-paper), .72);

  /* ——— Semantic shortcuts ——— */
  --color-bg: var(--paper);
  --color-surface: var(--panel);
  --color-primary: var(--emerald);
  --color-primary-hover: var(--emerald-hover);
  --color-secondary: var(--brass);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-accent: var(--accent);

  /* ——— Shadows ——— */
  --shadow-soft: 0 10px 30px rgba(var(--rgb-ink), .06);
  --shadow-card: 0 18px 40px rgba(var(--rgb-ink), .06);
  --shadow-button: 0 10px 24px rgba(var(--rgb-emerald), .22);
  --shadow-accent: 0 10px 24px rgba(175, 140, 94, .28);

  /* ——— Typography ——— */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Outfit", "Segoe UI", sans-serif;

  /* ——— Gradients (из тонов фото) ——— */
  --gradient-page: radial-gradient(circle at 12% -10%, rgba(var(--rgb-brass), .12), transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(var(--rgb-emerald), .08), transparent 36%),
    var(--paper);
  --gradient-section: linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
  --gradient-section-reverse: linear-gradient(180deg, var(--paper-deep) 0%, var(--paper) 100%);
  --gradient-cta: radial-gradient(circle at 90% 50%, rgba(var(--rgb-emerald), .1), transparent 45%),
    linear-gradient(110deg, var(--glow-deep), var(--paper) 55%, #e6ebe4);
  --gradient-bottom-cta: linear-gradient(110deg, var(--glow-deep), #e6ebe4);
  --gradient-group-hero: linear-gradient(125deg, var(--paper) 0%, var(--paper-deep) 57%, #e0e8e2 100%);
  --gradient-group-conditions: linear-gradient(135deg, #e6ebe4, var(--paper-deep));

  /* ——— Hero overlays ——— */
  --gradient-hero-veil: linear-gradient(90deg, rgba(var(--rgb-veil), .58) 0%, rgba(var(--rgb-veil), .22) 42%, rgba(var(--rgb-veil), .04) 68%),
    linear-gradient(180deg, rgba(var(--rgb-veil), .08) 0%, rgba(var(--rgb-veil), .02) 45%, rgba(var(--rgb-veil), .55) 78%, rgba(var(--rgb-veil), .82) 100%);
  --gradient-hero-veil-desktop: linear-gradient(90deg, rgba(var(--rgb-veil), .62) 0%, rgba(var(--rgb-veil), .28) 36%, rgba(var(--rgb-veil), .02) 58%),
    linear-gradient(180deg, transparent 55%, rgba(var(--rgb-veil), .35) 88%, rgba(var(--rgb-veil), .5) 100%);
  --gradient-hero-photo: linear-gradient(90deg, rgba(var(--rgb-veil), .55) 0%, rgba(var(--rgb-veil), .18) 38%, rgba(var(--rgb-veil), .02) 62%),
    linear-gradient(0deg, rgba(var(--rgb-veil), .12), transparent 40%);

  /* ——— Spacing scale ——— */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 28px;
  --space-lg: 48px;
  --space-xl: 88px;

  /* ——— Radius ——— */
  --radius-pill: 999px;
  --radius-sm: 2px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ——— Motion (CSS only; no JS libraries) ——— */
  --motion-instant: 80ms;
  --motion-fast: 180ms;
  --motion-normal: 350ms;
  --motion-slow: 600ms;
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sharp: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-distance-sm: 8px;
  --motion-distance-md: 14px;
  --scale-press: 0.97;
}