/**
 * AX Atlas — Design Tokens
 *
 * Editorial / Premium B2B 스타일.
 * - 깊은 네이비 베이스 + 일렉트릭 블루 액센트 (AX 톤)
 * - oklch 색상 (현대 브라우저, 자연스러운 명도 곡선)
 * - clamp() 로 fluid 타이포그래피
 * - 4-base 스페이싱
 */

:root {
  /* ── Color ── */
  --color-bg:           oklch(99% 0.002 250);
  --color-bg-subtle:    oklch(97% 0.004 250);
  --color-surface:      oklch(100% 0 0);
  --color-text:         oklch(15% 0.01 250);
  --color-text-muted:   oklch(45% 0.01 250);
  --color-text-subtle:  oklch(65% 0.01 250);
  --color-border:       oklch(92% 0.005 250);
  --color-border-strong: oklch(85% 0.005 250);

  --color-accent:       oklch(48% 0.18 256);
  --color-accent-strong: oklch(40% 0.20 256);
  --color-accent-soft:  oklch(95% 0.04 256);
  --color-accent-fg:    oklch(98% 0 0);

  --color-success:      oklch(55% 0.15 145);
  --color-warning:      oklch(70% 0.18 70);

  /* deep ink (footer / hero accents) */
  --color-ink:          oklch(18% 0.03 256);
  --color-ink-text:     oklch(95% 0.01 256);
  --color-ink-muted:    oklch(70% 0.02 256);
  --color-ink-border:   oklch(28% 0.03 256);

  /* ── Typography ── */
  --font-sans: 'Pretendard Variable', 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-display: 'Inter Tight', 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* fluid scale — clamp(min, ideal, max) */
  --text-xs:   clamp(0.75rem, 0.72rem + 0.10vw, 0.81rem);
  --text-sm:   clamp(0.875rem, 0.84rem + 0.12vw, 0.94rem);
  --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.06rem + 0.30vw, 1.25rem);
  --text-xl:   clamp(1.375rem, 1.20rem + 0.50vw, 1.625rem);
  --text-2xl:  clamp(1.625rem, 1.40rem + 0.80vw, 2rem);
  --text-3xl:  clamp(2rem, 1.60rem + 1.40vw, 2.75rem);
  --text-4xl:  clamp(2.5rem, 1.80rem + 2.50vw, 3.75rem);
  --text-hero: clamp(2.75rem, 1.40rem + 5.50vw, 5.5rem);

  --tracking-tight: -0.025em;
  --tracking-normal: -0.011em;
  --tracking-wide: 0.04em;

  --leading-tight: 1.05;
  --leading-snug: 1.20;
  --leading-base: 1.55;
  --leading-relaxed: 1.70;

  /* ── Space (4-base) ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   3rem;
  --space-8:   4rem;
  --space-9:   6rem;
  --space-10:  8rem;
  --space-11: 12rem;

  --space-section: clamp(4rem, 6vw + 2rem, 8rem);

  /* ── Radius ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ── Shadow (subtle) ── */
  --shadow-xs: 0 1px 2px oklch(15% 0.02 250 / 0.04);
  --shadow-sm: 0 1px 3px oklch(15% 0.02 250 / 0.06), 0 1px 2px oklch(15% 0.02 250 / 0.04);
  --shadow-md: 0 4px 12px oklch(15% 0.02 250 / 0.08), 0 2px 4px oklch(15% 0.02 250 / 0.04);
  --shadow-lg: 0 12px 32px oklch(15% 0.02 250 / 0.10), 0 4px 8px oklch(15% 0.02 250 / 0.04);

  /* ── Motion ── */
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Layout ── */
  --container-narrow: 720px;
  --container-base: 1080px;
  --container-wide: 1280px;

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}