/* ============================================================
   Design Tokens — 제17차 환경위성 국제워크숍
   ============================================================ */

:root {
  /* Color */
  --color-bg: #0B1B2B;
  --color-bg-alt: #FFFFFF;
  --color-bg-soft: #F4F7FB;
  --color-bg-deep: #061322;

  --color-primary: #0A4D8C;
  --color-primary-dark: #06325C;
  --color-primary-soft: rgba(10, 77, 140, 0.08);

  --color-accent: #22B8CF;
  --color-accent-2: #7DD3FC;
  --color-accent-glow: rgba(34, 184, 207, 0.35);

  --color-text: #1F2937;
  --color-text-muted: #6B7280;
  --color-text-invert: #F8FAFC;
  --color-text-invert-muted: rgba(248, 250, 252, 0.72);

  --color-border: #E5E7EB;
  --color-border-strong: #CBD5E1;
  --color-border-invert: rgba(248, 250, 252, 0.18);

  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-error: #DC2626;

  /* Typography */
  --font-sans: 'Inter', 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: 'Source Serif 4', 'Source Serif Pro', 'Noto Serif KR', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* Spacing (8pt grid) */
  --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;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 24px;
  --header-height: 80px;
  --header-height-compact: 64px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(11, 27, 43, 0.06);
  --shadow-md: 0 4px 16px rgba(11, 27, 43, 0.08);
  --shadow-lg: 0 12px 40px rgba(11, 27, 43, 0.12);
  --shadow-glow: 0 0 32px var(--color-accent-glow);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;

  /* Z-index */
  --z-header: 100;
  --z-modal: 200;
  --z-toast: 300;
}

@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;
  }
}