/* ============================================================
   BAZA ZEMLYA — Design Tokens
   Палитра: грифон (золото + тёмный изумруд + горная лазурь)
   ============================================================ */

:root,
[data-theme='light'] {
  /* ── Шрифты ── */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Jost', 'Helvetica Neue', sans-serif;

  /* ── Типографика (fluid) ── */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 7rem);

  /* ── Отступы 4px-grid ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Основная палитра — Грифон: золото + изумруд + горы ── */
  --color-bg:              #f5f3ee;
  --color-surface:         #faf8f4;
  --color-surface-2:       #ffffff;
  --color-surface-offset:  #ede9e1;
  --color-surface-offset-2:#e6e1d8;
  --color-surface-dynamic: #ddd7cb;
  --color-divider:         #d4cfc4;
  --color-border:          #c8c2b4;

  /* Текст */
  --color-text:         #1e1c17;
  --color-text-muted:   #6b6659;
  --color-text-faint:   #b0a896;
  --color-text-inverse: #faf8f4;

  /* Акцент 1: Изумрудно-горный (основной CTA) */
  --color-primary:          #1a5c45;
  --color-primary-hover:    #144834;
  --color-primary-active:   #0e3325;
  --color-primary-highlight:#c9ddd6;

  /* Акцент 2: Золото грифона */
  --color-gold:          #c9930a;
  --color-gold-hover:    #a87a07;
  --color-gold-active:   #865f04;
  --color-gold-highlight:#f5e6c0;

  /* Акцент 3: Горная лазурь */
  --color-blue:          #2563a0;
  --color-blue-hover:    #1a4d82;
  --color-blue-active:   #103760;
  --color-blue-highlight:#c8d9ed;

  /* Служебные */
  --color-success:          #2d6a2d;
  --color-success-highlight:#d0e8d0;
  --color-error:            #a12020;
  --color-error-highlight:  #e8d0d0;
  --color-warning:          #c9700a;
  --color-warning-highlight:#f5dfc0;
  --color-notification:     #a12020;

  /* Gradients — главный брендовый */
  --gradient-hero: linear-gradient(
    135deg in oklab,
    oklch(0.22 0.08 152) 0%,      /* глубокий изумруд */
    oklch(0.28 0.1 175) 40%,       /* тёмно-зелёный горный */
    oklch(0.35 0.06 240) 100%      /* горная синева */
  );
  --gradient-gold: linear-gradient(
    90deg in oklab,
    oklch(0.68 0.12 80) 0%,
    oklch(0.75 0.14 65) 100%
  );
  --gradient-card: linear-gradient(
    180deg,
    transparent 50%,
    oklch(0.1 0.05 152 / 0.85) 100%
  );

  /* Радиусы */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* Переходы */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:        400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Тени */
  --shadow-sm:  0 1px 2px  oklch(0.15 0.06 152 / 0.08);
  --shadow-md:  0 4px 12px oklch(0.15 0.06 152 / 0.12);
  --shadow-lg:  0 12px 32px oklch(0.15 0.06 152 / 0.18);
  --shadow-xl:  0 24px 60px oklch(0.15 0.06 152 / 0.24);

  /* Контент */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
  --content-full:    100%;

  /* Высота шапки */
  --header-height: 72px;
}

/* ── ТЁМНАЯ ТЕМА ── */
[data-theme='dark'] {
  --color-bg:              #111310;
  --color-surface:         #161814;
  --color-surface-2:       #1b1e19;
  --color-surface-offset:  #1e2219;
  --color-surface-offset-2:#23271e;
  --color-surface-dynamic: #2a2f24;
  --color-divider:         #242820;
  --color-border:          #363c2e;

  --color-text:         #e6e2d8;
  --color-text-muted:   #8a8678;
  --color-text-faint:   #5a5750;
  --color-text-inverse: #111310;

  --color-primary:          #3d9a76;
  --color-primary-hover:    #2d7c5e;
  --color-primary-active:   #1d5e46;
  --color-primary-highlight:#1e3b2e;

  --color-gold:          #e8b030;
  --color-gold-hover:    #fac840;
  --color-gold-active:   #fcd860;
  --color-gold-highlight:#3d3018;

  --color-blue:          #5a90cc;
  --color-blue-hover:    #4278b0;
  --color-blue-active:   #2c6095;
  --color-blue-highlight:#1e2e3d;

  --color-success:          #4aaa4a;
  --color-success-highlight:#1e3a1e;
  --color-error:            #dd5555;
  --color-error-highlight:  #3a1e1e;
  --color-warning:          #e09030;
  --color-warning-highlight:#3a2a10;
  --color-notification:     #dd5555;

  --gradient-hero: linear-gradient(
    135deg in oklab,
    oklch(0.14 0.06 152) 0%,
    oklch(0.18 0.08 175) 40%,
    oklch(0.22 0.05 230) 100%
  );

  --shadow-sm:  0 1px 2px  oklch(0 0 0 / 0.2);
  --shadow-md:  0 4px 12px oklch(0 0 0 / 0.3);
  --shadow-lg:  0 12px 32px oklch(0 0 0 / 0.4);
  --shadow-xl:  0 24px 60px oklch(0 0 0 / 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:              #111310;
    --color-surface:         #161814;
    --color-surface-2:       #1b1e19;
    --color-surface-offset:  #1e2219;
    --color-surface-offset-2:#23271e;
    --color-surface-dynamic: #2a2f24;
    --color-divider:         #242820;
    --color-border:          #363c2e;
    --color-text:         #e6e2d8;
    --color-text-muted:   #8a8678;
    --color-text-faint:   #5a5750;
    --color-text-inverse: #111310;
    --color-primary:          #3d9a76;
    --color-primary-hover:    #2d7c5e;
    --color-primary-active:   #1d5e46;
    --color-primary-highlight:#1e3b2e;
    --color-gold:          #e8b030;
    --color-gold-hover:    #fac840;
    --gradient-hero: linear-gradient(135deg in oklab, oklch(0.14 0.06 152) 0%, oklch(0.18 0.08 175) 40%, oklch(0.22 0.05 230) 100%);
    --shadow-sm:  0 1px 2px oklch(0 0 0 / 0.2);
    --shadow-md:  0 4px 12px oklch(0 0 0 / 0.3);
    --shadow-lg:  0 12px 32px oklch(0 0 0 / 0.4);
    --shadow-xl:  0 24px 60px oklch(0 0 0 / 0.5);
  }
}