/**
 * Design Tokens — Warm-Platinum (Sprint S8)
 *
 * Источник: docs/s8/moodboard.md (ADR-005)
 * 3-layer: Primitives → Semantic → Component
 * Не менять без нового ADR.
 */

:root {
  /* ===== Layer 1: Primitives — Warm tones ===== */
  --color-terracotta-600: #B05B3B;
  --color-terracotta-700: #8F4428;
  --color-terracotta-100: #F5E1D6;
  --color-platinum-500: #B8A88A;
  --color-platinum-300: #D8CDB8;
  --color-platinum-100: #EFE8D9;
  --color-cream-50: #F8F4EC;

  /* ===== Layer 1: Primitives — Neutrals ===== */
  --color-navy-900: #1A2E5F;
  --color-navy-700: #2A4080;
  --color-white: #FFFFFF;
  --color-ink-900: #1D1D1F;
  --color-ink-600: #4A4A50;
  --color-ink-400: #8B8B92;
  --color-line-200: #E5E0D5;

  /* ===== Layer 1: Primitives — Typography scale (clamp fluid) ===== */
  --fs-12: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
  --fs-14: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --fs-16: clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);
  --fs-18: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-24: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-32: clamp(1.625rem, 1.5rem + 0.6vw, 2rem);
  --fs-48: clamp(2.25rem, 1.9rem + 1.5vw, 3rem);
  --fs-72: clamp(3rem, 2.2rem + 3.5vw, 4.5rem);
  --fs-128: clamp(5rem, 3.5rem + 6vw, 8rem);

  /* line-heights */
  --lh-tight: 1;
  --lh-heading: 1.1;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* letter-spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-ultra: 0.18em;

  /* ===== Layer 1: Primitives — Font families (self-hosted, preserved) ===== */
  --ff-display: 'Playfair Display', Georgia, serif;
  --ff-body: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-serif-body: 'Merriweather', Georgia, serif;

  /* ===== Layer 1: Primitives — Spacing scale (4px base) ===== */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ===== Layer 1: Primitives — Radii (sharp corners, max 4px) ===== */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ===== Layer 1: Primitives — Shadows (subtle, ≤24px blur) ===== */
  --shadow-none: none;
  --shadow-sm: 0 2px 8px rgba(26, 46, 95, 0.04);
  --shadow-md: 0 4px 16px rgba(26, 46, 95, 0.06);
  --shadow-lg: 0 8px 24px rgba(26, 46, 95, 0.08);

  /* ===== Layer 1: Primitives — Motion ===== */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --dur-reveal: 800ms;
  --ease-out-cubic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

  /* ===== Layer 1: Primitives — Breakpoints (info only; используй в @media напрямую) ===== */
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1200px;
  --container-max: 1280px;

  /* ===== Layer 2: Semantic — Surface ===== */
  --color-bg-primary: var(--color-cream-50);
  --color-bg-alt: var(--color-platinum-100);
  --color-bg-dark: var(--color-navy-900);
  --color-bg-card: var(--color-white);
  --color-bg-subtle: var(--color-terracotta-100);

  /* ===== Layer 2: Semantic — Text ===== */
  --color-text-primary: var(--color-ink-900);
  --color-text-secondary: var(--color-ink-600);
  --color-text-tertiary: var(--color-ink-400);
  --color-text-inverse: var(--color-white);
  --color-text-caption: var(--color-platinum-300);

  /* ===== Layer 2: Semantic — Accent & borders ===== */
  --color-accent: var(--color-terracotta-600);
  --color-accent-hover: var(--color-terracotta-700);
  --color-divider: var(--color-platinum-500);
  --color-border-subtle: var(--color-line-200);
  --color-border-card: var(--color-platinum-300);

  /* ===== Layer 3: Component — Buttons ===== */
  --btn-primary-bg: var(--color-accent);
  --btn-primary-bg-hover: var(--color-accent-hover);
  --btn-primary-text: var(--color-white);
  --btn-outline-border: var(--color-platinum-500);
  --btn-outline-text: var(--color-text-primary);
  --btn-outline-border-hover: var(--color-accent);
  --btn-radius: var(--radius-sm);
  --btn-padding-x: var(--sp-6);
  --btn-padding-y: var(--sp-3);
  --btn-font-weight: 600;
  --btn-letter-spacing: var(--ls-wide);
  --btn-transition: all var(--dur-fast) var(--ease-out);

  /* ===== Layer 3: Component — Section header ===== */
  --eyebrow-color: var(--color-accent);
  --eyebrow-size: var(--fs-12);
  --eyebrow-tracking: var(--ls-ultra);
  --eyebrow-weight: 600;
  --divider-width: 48px;
  --divider-height: 2px;
  --divider-color: var(--color-divider);

  /* ===== Layer 3: Component — Card ===== */
  --card-bg: var(--color-bg-card);
  --card-border: 1px solid var(--color-border-card);
  --card-radius: var(--radius-none);
  --card-padding: var(--sp-6);
  --card-shadow: var(--shadow-none);
  --card-shadow-hover: var(--shadow-lg);
  --card-transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);

  /* ===== Layer 3: Component — Hero v2 ===== */
  --hero-min-height: 90vh;
  --hero-overlay: linear-gradient(135deg, rgba(26, 46, 95, 0.55) 0%, rgba(26, 46, 95, 0.2) 100%);
  --hero-title-color: var(--color-white);
  --hero-lead-color: var(--color-platinum-100);

  /* ===== Layer 3: Component — Form input ===== */
  --input-bg: var(--color-white);
  --input-border: 1px solid var(--color-line-200);
  --input-border-focus: 1px solid var(--color-accent);
  --input-radius: var(--radius-sm);
  --input-padding-x: var(--sp-4);
  --input-padding-y: var(--sp-3);
  --input-font-size: var(--fs-16);

  /* ===== Layer 3: Component — Section spacing ===== */
  --section-padding-y: clamp(var(--sp-12), 8vw, var(--sp-24));
  --section-padding-x: var(--sp-4);
}

/* ===== Dark section inversion (используется на navy-900 bg) ===== */
.sk-section--dark {
  --color-text-primary: var(--color-white);
  --color-text-secondary: var(--color-platinum-300);
  --color-divider: var(--color-terracotta-600);
  --color-border-card: rgba(255, 255, 255, 0.12);
  --card-bg: rgba(255, 255, 255, 0.04);
  --btn-outline-border: rgba(255, 255, 255, 0.4);
  --btn-outline-text: var(--color-white);
}

/* ===== Reduced motion override ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
}