/* ============================================================
   iSecureX 디자인 토큰 (리디자인 시안 → 앱 이식)
   - 시안(export/*.dc.html)의 [data-theme] 토큰을 1:1 포팅한 단일 출처.
   - MudBlazor 팔레트(--mud-palette-*)와 별개 레이어. 신규/리디자인 컴포넌트가 이 토큰을 사용한다.
   - 전환: MainLayout 이 IUserThemeService 값으로 <html data-theme="dark|light"> 를 세팅(app-interop.js setTheme).
   - 매핑/사용 규칙: docs/design/DESIGN-TOKENS.md
   ============================================================ */

:root {
  /* 타이포 (Pretendard 본문 / JetBrains Mono 수치·ID) */
  --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* 밝은 시안 하이라이트 — 사이드바 active·아이콘·도넛 등 강조용(테마 무관 고정) */
  --accent-bright: #22d3ee;

  /* ── 레이아웃 (뷰포트 고정 페이지) ──
     콘텐츠 영역 높이 = 100vh - offset. MainLayout 헤더/PageHeader 높이와 동기화해야 하므로
     매직넘버를 여기 단일 출처로 모은다(변경 시 여기만 수정).
     offset = MainLayout padding-top 88 + PageHeader 버튼행 32 + mb-3 12 = 132. */
  --ix-content-offset: 132px;
  --ix-content-offset-pager: calc(var(--ix-content-offset) + 12px); /* 페이저 상시 노출(운영 이력) */
  --ix-min-content-height: 640px;      /* 소형 창 페이지 스크롤 강등 가드(대시보드) */
  --ix-min-content-height-sm: 520px;   /* 동 가드(운영 이력) */
}

/* ── Light ───────────────────────────────────────────────── */
:root[data-theme="light"] {
  --page-bg:#e5e7eb; --app-bg:#eef2f6; --frame-border:#c4ccd6; --sidebar-bg:#0f1b2d;
  --surface:#ffffff; --surface-2:#f8fafc; --header-bg:#ffffff;
  --border:#e3e9f0; --border-2:#dbe2ea; --border-soft:#eef2f7; --row-border:#f3f5f9; --pill-border:#e2e8f0;
  --track:#f1f5f9; --card-shadow:0 1px 3px rgba(15,23,42,.05);
  --text:#0f172a; --text-2:#334155; --text-3:#475569; --text-muted:#64748b; --text-faint:#94a3b8;
  --accent:#0891b2; --danger:#dc2626; --danger-soft:#dc8585; --warn:#b45309; --warn-dot:#f59e0b; --ok:#15803d; --ok-dot:#16a34a; --info:#0e7490;
  --danger-bg:#fef2f2; --danger-bg2:#fff5f5; --danger-border:#fde2e2; --danger-chip:#fee2e2;
  --warn-bg:#fffbeb; --ok-bg:#ecfdf5; --info-bg:#ecfeff;
  --conn-bg:#ecfeff; --conn-border:#a5f3fc; --conn-dot:#06b6d4;
}

/* ── Dark (기본) ─────────────────────────────────────────── */
:root,
:root[data-theme="dark"] {
  --page-bg:#070b11; --app-bg:#0c121c; --frame-border:#1f2a3a; --sidebar-bg:#0a0f17;
  --surface:#141d29; --surface-2:#1a2433; --header-bg:#101924;
  --border:#233044; --border-2:#233044; --border-soft:#1e2a39; --row-border:#1a2433; --pill-border:#2c3a4f;
  --track:#233044; --card-shadow:0 1px 3px rgba(0,0,0,.35);
  --text:#f1f5f9; --text-2:#cbd5e1; --text-3:#aab6c4; --text-muted:#93a1b2; --text-faint:#6f7d8e;
  --accent:#0891b2; --danger:#f87171; --danger-soft:#f0a0a0; --warn:#f59e0b; --warn-dot:#f59e0b; --ok:#4ade80; --ok-dot:#16a34a; --info:#67e8f9;
  --danger-bg:rgba(248,113,113,.13); --danger-bg2:rgba(248,113,113,.09); --danger-border:rgba(248,113,113,.28); --danger-chip:rgba(248,113,113,.2);
  --warn-bg:rgba(251,191,36,.13); --ok-bg:rgba(74,222,128,.13); --info-bg:rgba(34,211,238,.12);
  --conn-bg:rgba(34,211,238,.12); --conn-border:rgba(34,211,238,.32); --conn-dot:#22d3ee;
}

/* :root[data-theme="dark"] 가 :root 보다 우선하도록 명시(라이트→다크 재전환 시 안전) */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }