/* ЭкоДом · Дизайн-токены
 * Базовые шкалы шрифтов/spacing/motion унаследованы из ikigai-design-system.
 * Цветовая палитра переопределена под фирменный изумруд + золото. */

:root {
  /* === БРЕНДОВАЯ ПАЛИТРА === */

  /* Изумрудная база */
  --color-emerald-deep:   oklch(24% 0.07 160);   /* hero-фон, deepest */
  --color-emerald:        oklch(34% 0.11 160);   /* mid-tone, секции */
  --color-emerald-soft:   oklch(40% 0.09 160);   /* поверхности */
  --color-emerald-bright: oklch(54% 0.15 160);   /* интерактив */
  --color-graphite:       oklch(16% 0.02 165);   /* footer, deepest */
  --color-graphite-soft:  oklch(22% 0.03 165);

  /* Золото */
  --color-gold:           oklch(72% 0.13 85);
  --color-gold-hot:       oklch(82% 0.16 85);    /* hover, glow */
  --color-gold-muted:     oklch(58% 0.09 85);    /* тонкие линии */
  --color-gold-deep:      oklch(48% 0.10 80);    /* активные ссылки */

  /* Текст и нейтрали */
  --color-ivory:          oklch(95% 0.02 80);    /* основной текст */
  --color-ivory-muted:    oklch(78% 0.04 80);    /* secondary */
  --color-ivory-dim:      oklch(62% 0.04 80);    /* мелкий текст */
  --color-cream:          oklch(88% 0.05 80);    /* выделения */

  /* Семантика */
  --color-bg:             var(--color-emerald-deep);
  --color-bg-section:     var(--color-emerald);
  --color-bg-card:        oklch(30% 0.08 160);
  --color-fg:             var(--color-ivory);
  --color-fg-muted:       var(--color-ivory-muted);
  --color-accent:         var(--color-gold);
  --color-accent-hot:     var(--color-gold-hot);
  --color-border:         oklch(45% 0.08 160 / 0.4);
  --color-border-gold:    oklch(72% 0.13 85 / 0.35);

  /* === ЭФФЕКТЫ === */
  --shadow-card:          0 12px 32px -8px oklch(10% 0.03 165 / 0.6);
  --shadow-card-hover:    0 24px 48px -10px oklch(8% 0.04 165 / 0.7);
  --shadow-gold-glow:     0 0 32px oklch(72% 0.13 85 / 0.28);
  --shadow-gold-strong:   0 0 48px oklch(82% 0.16 85 / 0.45);

  --gradient-hero:        radial-gradient(ellipse 80% 60% at 50% 0%,
                            var(--color-emerald) 0%,
                            var(--color-emerald-deep) 55%,
                            var(--color-graphite) 100%);
  --gradient-gold:        linear-gradient(135deg,
                            var(--color-gold-deep),
                            var(--color-gold-hot) 45%,
                            var(--color-gold) 100%);
  --gradient-gold-soft:   linear-gradient(135deg,
                            oklch(72% 0.13 85 / 0.15),
                            oklch(82% 0.16 85 / 0.05));
  --gradient-section:     linear-gradient(180deg,
                            var(--color-emerald-deep) 0%,
                            var(--color-emerald) 50%,
                            var(--color-emerald-deep) 100%);

  /* === ТИПОГРАФИКА === */
  --font-sans:    "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-serif:   "Source Serif 4", "Charter", Georgia, serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Шкала размеров (clamp для отзывчивости) */
  --text-xs:    clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:    clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --text-base:  clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
  --text-lg:    clamp(1.125rem, 1.04rem + 0.42vw, 1.25rem);
  --text-xl:    clamp(1.25rem, 1.14rem + 0.55vw, 1.5rem);
  --text-2xl:   clamp(1.5rem, 1.32rem + 0.9vw, 1.875rem);
  --text-3xl:   clamp(1.875rem, 1.6rem + 1.4vw, 2.5rem);
  --text-4xl:   clamp(2.5rem, 2.1rem + 2vw, 3.5rem);
  --text-hero:  clamp(2.75rem, 1rem + 6vw, 6rem);

  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-widest: 0.18em;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* === SPACING === */
  --space-0: 0;
  --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;

  --space-section: clamp(4rem, 3rem + 5vw, 9rem);
  --space-block:   clamp(2rem, 1.5rem + 2.5vw, 5rem);

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

  /* Контейнеры */
  --container-sm:      640px;
  --container-md:      768px;
  --container-lg:      1024px;
  --container-xl:      1280px;
  --container-2xl:     1440px;
  --container-content: 72ch;

  /* === MOTION === */
  --duration-instant:   100ms;
  --duration-fast:      150ms;
  --duration-normal:    300ms;
  --duration-slow:      500ms;
  --duration-slower:    800ms;
  --duration-cinematic: 1200ms;

  --ease-linear:      linear;
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}