/* ==========================================================================
   MGIS GROUND TRUTH Design System — tokens.css  v1.0 (2026-10)
   모든 시안(A/B/C)이 공유하는 디자인 토큰. 시안별 테마는 [data-theme] 로 재정의.
   대비 수치는 WCAG 2.2 기준 실측값 (docs/STEP4_디자인시스템.md 참고)
   ========================================================================== */

:root {
  /* ---------- 1. Color · Brand ---------- */
  --color-green-50:  #EEF8F0;
  --color-green-100: #D5EFDA;
  --color-green-300: #8FD39B;
  --color-green-400: #7CD08A;   /* 다크 배경 위 텍스트용 그린 (9.77:1 on ink) */
  --color-green-500: #55B765;   /* 로고 그린 · 브랜드 코어 (면/아이콘 전용, 흰 배경 텍스트 금지 2.52:1) */
  --color-green-600: #2F8F4A;
  --color-green-700: #237A3B;   /* 흰 배경 위 링크·강조 텍스트 (5.36:1) */
  --color-green-800: #1E6B34;

  --color-ink-950: #060D14;
  --color-ink-900: #0B1621;     /* 기본 텍스트 · 다크 배경 (18.25:1 on white) */
  --color-ink-800: #13222F;
  --color-ink-700: #1D3040;
  --color-ink-600: #2B4255;

  --color-gray-600: #5B6B7A;    /* 보조 텍스트 (5.48:1 on white) */
  --color-gray-500: #7A8896;
  --color-gray-400: #A7B4C0;    /* 다크 배경 보조 텍스트 (8.63:1 on ink) */
  --color-gray-300: #C9D2DA;
  --color-gray-200: #E3E8ED;
  --color-gray-100: #F1F4F6;
  --color-white:    #FFFFFF;

  --color-paper:    #F5F3EE;    /* 시안 C 지도 용지 톤 */
  --color-paper-2:  #ECE8DF;

  /* ---------- 2. Color · Data Spectrum (DSM 컬러램프에서 추출) ---------- */
  --data-1: #2F6BFF;   /* 낮은 고도 / 수계 */
  --data-2: #19B7D3;   /* 저지대 */
  --data-3: #55B765;   /* 중간 · 식생 */
  --data-4: #F2C94C;   /* 고지대 */
  --data-5: #F2733C;   /* 최고점 · 시그널 (Wingtra 오렌지와 공명) */
  --data-ramp: linear-gradient(90deg, var(--data-1), var(--data-2), var(--data-3), var(--data-4), var(--data-5));

  /* ---------- 3. Color · Semantic ---------- */
  --color-signal:  #F2733C;
  --color-info:    #1F6FEB;
  --color-success: var(--color-green-700);
  --color-danger:  #C8372D;

  /* ---------- 4. Typography ---------- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", "Pretendard Variable", Pretendard, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif: "Noto Serif KR", "Nanum Myeongjo", serif;

  /* 유동 타입 스케일 (360px → 1440px) */
  --fs-display: clamp(2.5rem, 1.5rem + 4.4vw, 5.5rem);   /* 40 → 88 */
  --fs-h1:      clamp(2rem, 1.4rem + 2.6vw, 3.75rem);    /* 32 → 60 */
  --fs-h2:      clamp(1.625rem, 1.25rem + 1.6vw, 2.75rem); /* 26 → 44 */
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);  /* 20 → 26 */
  --fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); /* 17 → 21 */
  --fs-body:    1rem;      /* 16 */
  --fs-small:   0.875rem;  /* 14 */
  --fs-caption: 0.75rem;   /* 12 · 좌표/HUD 라벨 */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.7;          /* 한글 본문 */
  --ls-tight: -0.03em;      /* 디스플레이 한글 자간 */
  --ls-mono:  0.08em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ---------- 5. Space (4px base) ---------- */
  --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-section: clamp(4.5rem, 3rem + 6vw, 9rem);

  /* ---------- 6. Layout ---------- */
  --container: 1280px;
  --container-narrow: 880px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);   /* 16 → 32 */
  --header-h: 72px;
  /* 브레이크포인트 (참조용, 미디어쿼리에선 값 직접 사용): 360 / 768 / 1024 / 1440 */

  /* ---------- 7. Radius · Border · Shadow ---------- */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px;
  --border-hair: 1px solid rgba(11, 22, 33, 0.10);
  --shadow-1: 0 1px 2px rgba(11,22,33,.06), 0 2px 8px rgba(11,22,33,.06);
  --shadow-2: 0 8px 24px rgba(11,22,33,.10), 0 2px 6px rgba(11,22,33,.06);
  --shadow-3: 0 24px 64px rgba(11,22,33,.18);

  /* ---------- 8. Motion ---------- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 150ms; --dur-2: 250ms; --dur-3: 450ms; --dur-4: 800ms;
  --dur-kenburns: 18s;

  /* ---------- 9. Z-index ---------- */
  --z-header: 100; --z-drawer: 200; --z-toast: 300;

  /* ---------- 10. Focus ---------- */
  --focus-ring: 0 0 0 3px var(--color-white), 0 0 0 6px var(--color-info);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-kenburns: 0s; }
}