/* Hallmark · macrostructure: Marquee Hero · tone: atmospheric-editorial · anchor hue: teal
 * theme: custom (vibe: "deep-night AI editorial tech"
 *   paper oklch(9% 0.018 250) · accent oklch(70% 0.175 195) teal)
 * display: Space Grotesk · body: system-ui
 * genre: atmospheric · nav: N7-edge-minimal · footer: Ft2-compact
 * pre-emit critique: P5 H4 E5 S5 R4 V5
 */

:root {
  /* ── Paper / surfaces ──────────────────────────── */
  --color-paper:    oklch(9% 0.018 250);
  --color-paper-2:  oklch(13% 0.022 250);
  --color-paper-3:  oklch(18% 0.025 250);
  --color-border:   oklch(24% 0.02 250);
  --color-border-2: oklch(30% 0.02 250);

  /* ── Text ──────────────────────────────────────── */
  --color-text:     oklch(92% 0.008 250);
  --color-text-2:   oklch(65% 0.012 250);
  --color-text-3:   oklch(45% 0.01 250);

  /* ── Accent — teal ─────────────────────────────── */
  --color-accent:      oklch(70% 0.175 195);
  --color-accent-dim:  oklch(38% 0.09 195);
  --color-accent-glow: oklch(70% 0.175 195 / 0.12);
  --color-accent-pale: oklch(70% 0.175 195 / 0.06);

  /* ── Secondary — coral (теги, выделения) ─────── */
  --color-coral:     oklch(68% 0.2 35);
  --color-coral-dim: oklch(32% 0.08 35);

  /* ── Focus ─────────────────────────────────────── */
  --color-focus: oklch(70% 0.175 195);

  /* ── Fonts ─────────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* ── Type scale ────────────────────────────────── */
  --text-display:   clamp(2.8rem, 8vw, 5.5rem);
  --text-display-s: clamp(2rem, 4.5vw, 3rem);
  --text-2xl:       clamp(1.4rem, 2.5vw, 1.875rem);
  --text-xl:        clamp(1.15rem, 1.8vw, 1.375rem);
  --text-lg:        1.125rem;
  --text-base:      1rem;
  --text-sm:        0.875rem;
  --text-xs:        0.75rem;

  /* ── Spacing (4pt scale) ────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── Motion ────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;

  /* ── Radius ─────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* ── Layout ─────────────────────────────────────── */
  --container:   1280px;
  --gutter:      clamp(var(--space-6), 5vw, var(--space-16));
}