/* tokens.css — 디자인 토큰 (light / dark)
 * 정의: design/login-handoff.md + design/dashboard-handoff.md
 * 사용처: 전 페이지 공용. 새 모듈은 토큰만 참조, 색상/radius/shadow 하드코딩 금지.
 */

:root {
  color-scheme: light dark;

  /* Brand */
  --color-brand: #C0392B;
  --color-brand-hover: #a93226;

  /* Surface */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f9fafb;

  /* Text */
  --color-text: #111827;
  --color-text-sub: #4b5563;
  --color-text-label: #374151;
  --color-text-muted: #6b7280;
  --color-text-inverse: #ffffff;

  /* Semantic */
  --color-error: #dc2626;
  --color-success: #059669;
  --color-warn: #d97706;
  --color-focus-ring: #C0392B;

  /* Border */
  --color-border: #e5e7eb;
  --color-input-border: #d1d5db;
  --color-table-header: #f9fafb;

  /* Sidebar (대시보드 셸 전용) — 휴넷 브랜드 적색 베이스 */
  --color-sidebar-bg: #5C1411;
  --color-sidebar-border: #7C1D1E;
  --color-sidebar-hover: #7C1D1E;
  --color-text-sidebar: #fef2f2;
  --color-text-nav: #f5d9d6;
  --color-text-nav-sub: #d8a8a3;

  /* Radius */
  --radius-card: 12px;
  --radius-input: 8px;
  --radius-btn: 8px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-card: 0 6px 24px rgba(0, 0, 0, .08);
  --shadow-card-sm: 0 1px 3px rgba(0, 0, 0, .06);

  /* Motion */
  --transition-base: 0.15s ease;

  /* Font */
  --font-base: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Malgun Gothic", system-ui, sans-serif;

  /* Z-index */
  --z-overlay: 20;
  --z-drawer: 25;
  --z-menu-toggle: 30;

  /* Breakpoints (참조용, 미디어쿼리 본문에는 직접 px 사용) */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
}

[data-theme="dark"] {
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-surface-alt: #0b1224;

  --color-text: #f1f5f9;
  --color-text-sub: #94a3b8;
  --color-text-label: #cbd5e1;
  --color-text-muted: #94a3b8;

  --color-focus-ring: #e05a4b;

  --color-border: #334155;
  --color-input-border: #475569;
  --color-table-header: #0b1224;

  --color-sidebar-bg: #3D0E0E;
  --color-sidebar-border: #5C1411;
  --color-sidebar-hover: #5C1411;
  --color-text-sidebar: #fef2f2;
  --color-text-nav: #f5d9d6;
  --color-text-nav-sub: #c89691;

  --shadow-card: 0 6px 24px rgba(0, 0, 0, .4);
  --shadow-card-sm: 0 1px 3px rgba(0, 0, 0, .25);
}

/* 시스템 다크모드를 기본값으로 (localStorage 미설정 시) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-surface-alt: #0b1224;
    --color-text: #f1f5f9;
    --color-text-sub: #94a3b8;
    --color-text-label: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-focus-ring: #e05a4b;
    --color-border: #334155;
    --color-input-border: #475569;
    --color-table-header: #0b1224;
    --color-sidebar-bg: #3D0E0E;
    --color-sidebar-border: #5C1411;
    --color-sidebar-hover: #5C1411;
    --color-text-sidebar: #fef2f2;
    --shadow-card: 0 6px 24px rgba(0, 0, 0, .4);
    --shadow-card-sm: 0 1px 3px rgba(0, 0, 0, .25);
  }
}

/* 글로벌 reset 최소 */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* 테마 토글 (글로벌) */
.theme-toggle {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-base), background var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}
.theme-toggle:hover {
  opacity: 1;
  background: rgba(128, 128, 128, 0.15);
}
.theme-toggle:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* 포커스 링 공통 */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}