/* ──────────────────────────────────────────────
   T-ARCH 디자인 토큰 (2026-05)
   모든 색·여백·radius·shadow·타이포는 여기서 단일 진실.
   platform.css와 모든 템플릿은 이 토큰만 사용 (하드코딩 hex 금지).
   ────────────────────────────────────────────── */

:root {
  /* ── Brand ─────────────────────────────────── */
  --brand-primary:   #2D7A5F;            /* Sage Green — 메인 */
  --brand-secondary: #1F4D3C;            /* Deep Forest — 사이드바 */
  --brand-accent:    #4ADE80;            /* 밝은 sage — 로고/상태점 */

  /* ── Backgrounds ───────────────────────────── */
  --bg-page:    #FAF8F3;                 /* Warm Off-white — 전체 배경 */
  --bg-card:    #FFFFFF;                 /* 카드 */
  --bg-section: #F4F1EA;                 /* Light Beige — 섹션 구분 */
  --bg-sidebar: #1F4D3C;                 /* Deep Forest */
  --bg-sidebar-gradient: linear-gradient(180deg, #25593F 0%, #1F4D3C 100%);

  /* ── Text ──────────────────────────────────── */
  --text-primary:        #1C1B1A;        /* Warm Black */
  --text-secondary:      #6B6862;        /* Warm Gray */
  --text-tertiary:       #A3A09A;        /* Light Warm Gray */
  --text-inverse:        #FAF8F3;        /* 다크 배경용 */
  --text-inverse-muted:  rgba(250, 248, 243, 0.65);
  --text-inverse-subtle: rgba(250, 248, 243, 0.40);

  /* ── Borders ───────────────────────────────── */
  --border-subtle:  #EFEBE0;
  --border-default: #E5E2D9;
  --border-strong:  #C9C5B8;
  --border-inverse: rgba(250, 248, 243, 0.10);

  /* ── Status (등급 A~F · 알람 심각도) ───────── */
  --status-a: #2D7A5F;                   /* 정상 */
  --status-b: #5B9377;                   /* 양호 */
  --status-c: #D97706;                   /* 주의 */
  --status-d: #C2410C;                   /* 경고 */
  --status-f: #B91C1C;                   /* 위험 */

  --status-a-bg: rgba(45, 122, 95, 0.08);
  --status-b-bg: rgba(91, 147, 119, 0.08);
  --status-c-bg: rgba(217, 119, 6, 0.08);
  --status-d-bg: rgba(194, 65, 12, 0.08);
  --status-f-bg: rgba(185, 28, 28, 0.08);

  --status-a-border: rgba(45, 122, 95, 0.18);
  --status-c-border: rgba(217, 119, 6, 0.18);
  --status-f-border: rgba(185, 28, 28, 0.18);

  /* ── Semantic ──────────────────────────────── */
  --color-info: #1E5A8E;                 /* Steel Blue */
  --color-cta:  #C8842B;                 /* Warm Gold */

  /* ── Layout ────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --shadow-card:        0 1px 3px rgba(28, 27, 26, 0.04),
                        0 1px 2px rgba(28, 27, 26, 0.06);
  --shadow-card-hover:  0 4px 12px rgba(28, 27, 26, 0.08);
  --shadow-elevated:    0 8px 24px rgba(28, 27, 26, 0.10);
  --shadow-modal:       0 24px 60px rgba(28, 27, 26, 0.24);

  /* ── Spacing scale ─────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Typography ────────────────────────────── */
  --font-sans: 'Pretendard Variable', 'Pretendard',
               -apple-system, BlinkMacSystemFont, 'Inter',
               'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* 2026-06 업스케일: 27인치 모니터 + 고령 사용자 가독성.
     색상 토큰은 불변, 크기 토큰만 상향. (단일 진실 — 여기 한 곳만 바꾸면 전체 확대) */
  --text-display: 36px;   /* 32 → 36 */
  --text-h1:      28px;   /* 24 → 28 */
  --text-h2:      22px;   /* 20 → 22 */
  --text-h3:      18px;   /* 16 → 18 */
  --text-body:    16px;   /* 15 → 16 (본문 최소 16) */
  --text-small:   14px;   /* 13 → 14 (버튼/보조 최소 14) */
  --text-caption: 12px;   /* 11 → 12 */

  /* 컴포넌트 전용 크기 토큰 (신규, 색상 무관) */
  --text-kpi:     36px;   /* KPI 대형 숫자 (최소 32 이상) */
  --text-kpi-sm:  28px;   /* KPI 보조 숫자(금액/날짜) */
  --tap-min:      44px;   /* 터치 타깃 최소 높이 */

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* ── Legacy alias (기존 템플릿 인라인 var(--accent) 등 호환) ─────
     새 코드는 위의 의미 토큰만 사용할 것 — 이 별칭은 기존 코드 무수정 호환을 위해서만 유지. */
  --sidebar: var(--bg-sidebar);
  --bg:      var(--bg-page);
  --card:    var(--bg-card);
  --accent:  var(--brand-primary);
  --text:    var(--text-primary);
  --subtext: var(--text-secondary);
  --danger:  var(--status-f);
  --warning: var(--status-c);
  --normal:  var(--status-a);
  --line:    var(--border-default);
  --blue:    var(--color-info);
  --yellow:  var(--status-c);
}