/* ═══════════════════════════════════════════════════════════════
   tokens.css — 디자인 시스템 토큰 (v3 · Slate + Dark Navbar)
   스펙: github.com/leejiman/design-system
   원칙: 그림자 쓰지 않는다 · 모션 쓰지 않는다 (색상 전환만 허용)
   다른 프로젝트(building0-cms, bsngroup 등)에 그대로 복사해 사용
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── 색: 텍스트 4단계 (Apple HIG, neutral 유지 — 차가워지면 가독성↓) ── */
  --text: #1a1a1a;             /* Primary — 본문·제목 (대비 17.4:1) */
  --text-secondary: #4a4a4a;   /* Secondary — 부제목·보조 본문 (9.7:1) */
  --text-tertiary: #6e6e6e;    /* Tertiary — 메타·캡션 (5.3:1) */
  --text-muted: #a1a1a1;       /* Muted — 비활성·placeholder (본문 금지) */

  /* ── 색: 반전 전경 (Primary 버튼·체크마크·다크 배경 위 모든 텍스트) ── */
  --on-accent: #ffffff;

  /* ── 색: 배경·보더 (Slate 계열 — 네이비와 조화, warm-neutral 금지) ── */
  --bg: #ffffff;
  --bg-surface: #ffffff;
  --bg-subtle: #f5f7fa;        /* 섹션·테이블 헤더·스택드 헤더 */
  --bg-muted: #eef1f5;         /* 코드 블록·비활성 카드·중성 배지 */
  --bg-input: #ffffff;
  --bg-header: #f5f7fa;
  --border: #e2e7ee;           /* 카드·입력·테이블 (기본) */
  --border-strong: #cbd2dc;    /* hover 보더 강조·구분선 */

  /* ── 색: 액센트 (Deep Navy — 보라 계열 금지) ── */
  --accent: #15253d;           /* Deep Navy — 엔터프라이즈·리포트 감성 */
  --accent-hover: #0e1a2b;     /* Darker Navy */
  --accent-bg: #eef1f6;        /* Subtle 배지·하이라이트 */
  --accent-border: #c8d0de;

  /* ── 색: 다크 네이비 (반전 영역 — Navbar 등, 액센트보다 한 단계 깊음) ── */
  --navbar-bg: #0b1528;
  --navbar-text: #cbd5e1;              /* slate-300 */
  --navbar-text-strong: #ffffff;
  --navbar-hover-bg: rgba(255, 255, 255, 0.08);
  --navbar-active-bg: rgba(255, 255, 255, 0.12);
  --navbar-border: rgba(255, 255, 255, 0.08);
  --navbar-avatar-bg: #24395c;         /* 내부 아바타 — 밝은 파생 */

  /* ── 색: 상태 — 4-파트 세트 (main/strong/bg/border) ── */
  --success: #16a34a;          --success-strong: #15803d;
  --success-bg: #f0fdf4;       --success-border: #bbf7d0;
  --warning: #ca8a04;          --warning-strong: #a16207;
  --warning-bg: #fefce8;       --warning-border: #fde68a;
  --danger:  #dc2626;          --danger-strong:  #b91c1c;
  --danger-bg:  #fef2f2;       --danger-border:  #fecaca;

  /* ── 색: Info = 액센트 별칭 (별도 blue 도입 금지) ── */
  --info:        var(--accent);
  --info-strong: var(--accent-hover);
  --info-bg:     var(--accent-bg);
  --info-border: var(--accent-border);

  /* ── 색: 중성 배지 별칭 ── */
  --neutral-text: var(--text-secondary);
  --neutral-bg:   var(--bg-muted);

  /* ── 타이포: 패밀리 ── */
  --font-sans: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic',
               -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'SF Mono', Menlo, Consolas, 'Noto Sans Mono', monospace;

  /* ── 타이포: 크기 스케일 ── */
  --fs-xs: 12px;     /* 캡션·메타·힌트 */
  --fs-sm: 13px;     /* 작은 라벨·배지 내부 텍스트 */
  --fs-md: 14px;     /* 테이블 셀·버튼·폼·카드 body small */
  --fs-base: 16px;   /* 본문 기본 (body) — 스펙 준수 */
  --fs-lg: 18px;     /* 강조 본문·카드 제목 */
  --fs-xl: 20px;     /* H4 */
  --fs-2xl: 24px;    /* H3·페이지 제목·KPI 값 */
  --fs-3xl: 32px;    /* H2·통계 카드 값 */
  --fs-4xl: 40px;    /* H1 */

  /* ── 타이포: 행간 ── */
  --lh-tight: 1.3;
  --lh-snug: 1.4;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;
  --lh-loose: 1.7;

  /* ── 타이포: 자간 (한글 특화) ── */
  --ls-tight: -0.03em;
  --ls-snug: -0.02em;
  --ls-normal: -0.01em;
  --ls-none: 0;
  --ls-wide: 0.02em;       /* th 대문자용 */
  --ls-wider: 0.04em;      /* group-header 대문자용 */

  /* ── 타이포: 굵기 ── */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ── 간격: 8pt 그리드 ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ── 반지름 (8pt 배수, 12px 이상 금지) ── */
  --radius-sm: 4px;        /* 배지·태그·입력 */
  --radius-md: 6px;        /* 버튼 */
  --radius-lg: 8px;        /* 카드·모달 */
  --radius-full: 9999px;   /* 원형·pill */

  /* ── 그림자 (원칙: 쓰지 않는다) ── */
  --shadow-none: none;
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.04);   /* 드롭다운·토스트 예외 */

  /* ── 전환 (원칙: 색상만 150ms, transform/opacity/height 금지) ── */
  --t-color: 150ms;

  /* ── 레이아웃 ── */
  --container-max: 1200px;
  --nav-h: 64px;
  --measure-ko: 36ch;
  --gutter: 24px;

  /* ── Z-index (임의값 금지) ── */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-tooltip: 30;
  --z-modal: 40;
  --z-toast: 50;
}

/* ── 다크 모드 오버라이드 ── */
body.dark {
  --text: #f9fafb;
  --text-secondary: #d1d5db;
  --text-tertiary: #9ca3af;
  --text-muted: #6b7280;

  --bg: #0b1528;                       /* Navbar 색과 통일 (전체 어두운 톤) */
  --bg-surface: #121d33;
  --bg-subtle: #162238;
  --bg-muted: #1d2a42;
  --bg-input: #162238;
  --bg-header: #162238;

  --border: #2a3650;
  --border-strong: #3b4a6b;

  /* 다크 액센트: 어두운 배경 위에서는 밝은 슬레이트 블루로 */
  --accent: #93a8c8;
  --accent-hover: #aec0da;
  --accent-bg: rgba(147, 168, 200, 0.14);
  --accent-border: rgba(147, 168, 200, 0.32);

  /* Navbar: 라이트 모드 그대로 (이미 다크니까 유지) */
  --navbar-bg: #0b1528;
  --navbar-text: #cbd5e1;
  --navbar-text-strong: #ffffff;

  --success-bg:  rgba(22, 163, 74, 0.14);    --success-strong:  #4ade80;
  --warning-bg:  rgba(202, 138, 4, 0.14);    --warning-strong:  #facc15;
  --danger-bg:   rgba(220, 38, 38, 0.14);    --danger-strong:   #f87171;

  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ── 사용자 모션 최소화 설정 존중 (기본값이 이미 모션 없음) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}