/* 공통 테마 토큰 */
:root {
    color-scheme: light;

    --new-theme-font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
    --new-theme-font-size-body: 13px;
    --new-theme-line-height-body: 1.5;

    --new-theme-bg-body: #f5f6f9;
    --new-theme-bg-main: #f3f5f8;
    --new-theme-bg-surface: #ffffff;
    --new-theme-bg-surface-alt: #f8fafc;
    --new-theme-bg-subtle: #eef2f7;
    --new-theme-bg-hover: #e2e8f0;

    --new-theme-border: #e2e8f0;
    --new-theme-border-strong: #cbd5e1;

    --new-theme-text-primary: #1f2937;
    --new-theme-text-secondary: #334155;
    --new-theme-text-muted: #64748b;
    --new-theme-text-inverse: #f8fafc;

    --new-theme-accent: #3182ce;
    --new-theme-accent-strong: #2563eb;
    --new-theme-accent-soft: #ebf8ff;

    --new-theme-success: #16a34a;
    --new-theme-success-soft: #dcfce7;
    --new-theme-warning: #d97706;
    --new-theme-warning-soft: #fef3c7;
    --new-theme-danger: #dc2626;
    --new-theme-danger-soft: #fee2e2;

    --new-theme-overlay: rgba(15, 23, 42, 0.45);
    --new-theme-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --new-theme-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.12);
    --new-theme-shadow-lg: 0 16px 28px rgba(15, 23, 42, 0.18);

    --new-theme-radius-sm: 6px;
    --new-theme-radius-md: 10px;
    --new-theme-radius-lg: 16px;

    --new-theme-space-1: 4px;
    --new-theme-space-2: 8px;
    --new-theme-space-3: 12px;
    --new-theme-space-4: 16px;
    --new-theme-space-5: 20px;
    --new-theme-space-6: 24px;

    /* 의미 기반 공용 컬러 토큰 */
    --color-bg-page: var(--new-theme-bg-body);
    --color-bg-main: var(--new-theme-bg-main);
    --color-bg-surface: var(--new-theme-bg-surface);
    --color-bg-surface-alt: var(--new-theme-bg-surface-alt);
    --color-bg-subtle: var(--new-theme-bg-subtle);
    --color-bg-hover: var(--new-theme-bg-hover);

    --color-border-default: var(--new-theme-border);
    --color-border-strong: var(--new-theme-border-strong);

    --color-text-primary: var(--new-theme-text-primary);
    --color-text-secondary: var(--new-theme-text-secondary);
    --color-text-muted: var(--new-theme-text-muted);
    --color-text-inverse: var(--new-theme-text-inverse);
    --color-empty-state-bg: transparent;
    --color-empty-state-text: var(--new-theme-text-muted);
    --color-link-text: var(--new-theme-accent);
    --color-selection-bg: var(--new-theme-accent-soft);
    --color-selection-text: var(--new-theme-text-primary);

    --color-accent-fill: var(--new-theme-accent-strong);
    --color-accent-fill-hover: #1d4ed8;
    --color-accent-text: #1d4ed8;
    --color-accent-contrast: #ffffff;
    --color-accent-surface: #eff6ff;
    --color-accent-surface-hover: #dbeafe;
    --color-accent-border: #dbeafe;
    --color-accent-border-strong: #93c5fd;

    --color-status-info-bg: #f0f9ff;
    --color-status-info-border: #bae6fd;
    --color-status-info-text: #0284c7;
    --color-status-success-bg: #f0fdf4;
    --color-status-success-border: #bbf7d0;
    --color-status-success-text: #16a34a;
    --color-status-danger-bg: #fef2f2;
    --color-status-danger-border: #fecaca;
    --color-status-danger-text: #dc2626;
    --color-status-warning-bg: var(--new-theme-warning-soft);
    --color-status-warning-text: var(--new-theme-warning);
    --color-status-neutral-bg: var(--new-theme-bg-subtle);
    --color-status-neutral-text: var(--new-theme-text-secondary);

    --color-scrollbar-thumb: var(--new-theme-border-strong);
    --color-header-action-active-bg: rgba(96, 165, 250, 0.16);
    --color-header-action-active-text: #bfdbfe;
    --color-header-bg: #4a5568;
    --color-header-subnav-bg: var(--new-theme-bg-surface-alt);
    --color-header-subnav-border: var(--new-theme-border);
    --color-header-text: #f8fafc;
    --color-header-text-muted: rgba(248, 250, 252, 0.82);
    --color-header-text-subtle: rgba(248, 250, 252, 0.76);
    --color-header-control-bg: rgba(255, 255, 255, 0.1);
    --color-header-control-bg-hover: rgba(255, 255, 255, 0.15);
    --color-header-control-border: rgba(255, 255, 255, 0.2);
    --color-header-focus-border: rgba(191, 219, 254, 0.9);
    --color-header-option-bg: #ffffff;
    --color-header-option-text: #111827;
    --color-header-danger-badge-bg: #e53e3e;
    --color-header-info-badge-bg: #2563eb;
    --color-header-favorite-idle: #a0aec0;
    --color-header-favorite-active-border: #f6d365;
    --color-header-favorite-active-bg: #fff8db;
    --color-header-favorite-active-text: #d97706;
    --color-header-search-hover-bg: #f7fafc;
    --color-indicator-pink: #f472b6;
    --color-focus-ring: rgba(49, 130, 206, 0.14);
    --color-overlay-default: var(--new-theme-overlay);
    --color-danger-soft: var(--new-theme-danger-soft);
    --color-danger-text: var(--new-theme-danger);
    --color-success-text: var(--new-theme-success);
    --color-warning-text: var(--new-theme-warning);
    --color-popover-bg: #2d3748;
    --color-popover-text: #ffffff;
    --color-online: #22c55e;
    --color-offline: var(--new-theme-border-strong);

    /* 기존 페이지 전용 CSS 호환 토큰 */
    --theme-bg-body: var(--new-theme-bg-body);
    --theme-bg-main: var(--new-theme-bg-main);
    --theme-bg-surface: var(--new-theme-bg-surface);
    --theme-bg-surface-alt: var(--new-theme-bg-surface-alt);
    --theme-bg-subtle: var(--new-theme-bg-subtle);
    --theme-bg-hover: var(--new-theme-bg-hover);
    --theme-border: var(--new-theme-border);
    --theme-border-strong: var(--new-theme-border-strong);
    --theme-text-primary: var(--new-theme-text-primary);
    --theme-text-secondary: var(--new-theme-text-secondary);
    --theme-text-muted: var(--new-theme-text-muted);
    --theme-text-inverse: var(--new-theme-text-inverse);
    --theme-accent: var(--new-theme-accent);
    --theme-accent-strong: var(--new-theme-accent-strong);
    --theme-accent-soft: var(--new-theme-accent-soft);
    --theme-success: var(--new-theme-success);
    --theme-success-soft: var(--new-theme-success-soft);
    --theme-warning: var(--new-theme-warning);
    --theme-warning-soft: var(--new-theme-warning-soft);
    --theme-danger: var(--new-theme-danger);
    --theme-danger-soft: var(--new-theme-danger-soft);
    --theme-shadow-sm: var(--new-theme-shadow-sm);
    --theme-shadow-md: var(--new-theme-shadow-md);
    --theme-shadow-lg: var(--new-theme-shadow-lg);
    --theme-loading-overlay: rgba(255, 255, 255, 0.72);

    /* 기존 개별 화면이 사용하는 테마 명칭을 의미 기반 토큰에 연결한다. */
    --theme-bg-page: var(--color-bg-page);
    --theme-border-color: var(--color-border-default);
    --theme-accent-primary: var(--color-accent-fill);
    --theme-header-bg: var(--color-header-bg);
    --theme-header-text: var(--color-header-text);
    --theme-overlay: var(--color-overlay-default);
}

/* 다크 모드 토큰 */
html[data-theme="dark"] {
    color-scheme: dark;

    --new-theme-bg-body: #111827;
    --new-theme-bg-main: #0f172a;
    --new-theme-bg-surface: #1f2937;
    --new-theme-bg-surface-alt: #111827;
    --new-theme-bg-subtle: #273449;
    --new-theme-bg-hover: #334155;

    --new-theme-border: #334155;
    --new-theme-border-strong: #475569;

    --new-theme-text-primary: #e2e8f0;
    --new-theme-text-secondary: #cbd5e1;
    --new-theme-text-muted: #94a3b8;
    --new-theme-text-inverse: #0f172a;

    --new-theme-accent: #60a5fa;
    --new-theme-accent-strong: #3b82f6;
    --new-theme-accent-soft: rgba(96, 165, 250, 0.18);

    --new-theme-success: #86efac;
    --new-theme-success-soft: rgba(34, 197, 94, 0.18);
    --new-theme-warning: #fcd34d;
    --new-theme-warning-soft: rgba(245, 158, 11, 0.2);
    --new-theme-danger: #fca5a5;
    --new-theme-danger-soft: rgba(239, 68, 68, 0.2);

    --new-theme-overlay: rgba(2, 6, 23, 0.72);
    --new-theme-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.45);
    --new-theme-shadow-md: 0 8px 20px rgba(2, 6, 23, 0.5);
    --new-theme-shadow-lg: 0 16px 28px rgba(2, 6, 23, 0.58);

    /* 다크모드에서만 달라지는 의미 토큰 */
    --color-accent-fill: var(--new-theme-accent);
    --color-accent-fill-hover: var(--new-theme-accent-strong);
    --color-accent-text: var(--new-theme-accent);
    --color-accent-surface: var(--new-theme-accent-soft);
    --color-accent-surface-hover: rgba(96, 165, 250, 0.28);
    --color-accent-border: var(--new-theme-accent);
    --color-accent-border-strong: var(--new-theme-accent);

    --color-status-info-bg: rgba(14, 165, 233, 0.18);
    --color-status-info-border: rgba(14, 165, 233, 0.42);
    --color-status-info-text: #7dd3fc;
    --color-status-success-bg: rgba(34, 197, 94, 0.18);
    --color-status-success-border: rgba(34, 197, 94, 0.42);
    --color-status-success-text: #86efac;
    --color-status-danger-bg: rgba(239, 68, 68, 0.18);
    --color-status-danger-border: rgba(239, 68, 68, 0.42);
    --color-status-danger-text: #fca5a5;
    --color-status-warning-bg: var(--new-theme-warning-soft);
    --color-status-warning-text: var(--new-theme-warning);
    --color-status-neutral-bg: var(--new-theme-bg-subtle);
    --color-status-neutral-text: var(--new-theme-text-secondary);
    --color-link-text: var(--new-theme-accent);
    --color-selection-bg: var(--new-theme-accent-soft);
    --color-selection-text: var(--new-theme-text-primary);
    --color-header-bg: #0f172a;
    --color-header-subnav-bg: #1e293b;
    --color-header-subnav-border: #475569;
    --color-header-text: #e2e8f0;
    --color-header-text-muted: rgba(226, 232, 240, 0.84);
    --color-header-text-subtle: rgba(226, 232, 240, 0.72);
    --color-header-control-bg: rgba(15, 23, 42, 0.32);
    --color-header-control-bg-hover: rgba(148, 163, 184, 0.18);
    --color-header-control-border: rgba(148, 163, 184, 0.3);
    --color-header-focus-border: rgba(96, 165, 250, 0.9);
    --color-header-option-bg: #0f172a;
    --color-header-option-text: #e2e8f0;
    --color-header-danger-badge-bg: #ef4444;
    --color-header-info-badge-bg: #3b82f6;
    --color-header-favorite-idle: #94a3b8;
    --color-header-favorite-active-border: rgba(250, 204, 21, 0.52);
    --color-header-favorite-active-bg: rgba(250, 204, 21, 0.14);
    --color-header-favorite-active-text: #fbbf24;
    --color-header-search-hover-bg: rgba(51, 65, 85, 0.9);
    --color-focus-ring: rgba(96, 165, 250, 0.18);
    --color-overlay-default: var(--new-theme-overlay);
    --color-danger-soft: var(--new-theme-danger-soft);
    --color-danger-text: var(--new-theme-danger);
    --color-success-text: var(--new-theme-success);
    --color-warning-text: var(--new-theme-warning);
    --color-popover-bg: #0f172a;
    --color-popover-text: #ffffff;
    --color-online: #22c55e;
    --color-offline: var(--new-theme-border-strong);

    /* 기존 페이지 전용 CSS 호환 토큰 */
    --theme-bg-body: var(--new-theme-bg-body);
    --theme-bg-main: var(--new-theme-bg-main);
    --theme-bg-surface: var(--new-theme-bg-surface);
    --theme-bg-surface-alt: var(--new-theme-bg-surface-alt);
    --theme-bg-subtle: var(--new-theme-bg-subtle);
    --theme-bg-hover: var(--new-theme-bg-hover);
    --theme-border: var(--new-theme-border);
    --theme-border-strong: var(--new-theme-border-strong);
    --theme-text-primary: var(--new-theme-text-primary);
    --theme-text-secondary: var(--new-theme-text-secondary);
    --theme-text-muted: var(--new-theme-text-muted);
    --theme-text-inverse: var(--new-theme-text-inverse);
    --theme-accent: var(--new-theme-accent);
    --theme-accent-strong: var(--new-theme-accent-strong);
    --theme-accent-soft: var(--new-theme-accent-soft);
    --theme-success: var(--new-theme-success);
    --theme-success-soft: var(--new-theme-success-soft);
    --theme-warning: var(--new-theme-warning);
    --theme-warning-soft: var(--new-theme-warning-soft);
    --theme-danger: var(--new-theme-danger);
    --theme-danger-soft: var(--new-theme-danger-soft);
    --theme-shadow-sm: var(--new-theme-shadow-sm);
    --theme-shadow-md: var(--new-theme-shadow-md);
    --theme-shadow-lg: var(--new-theme-shadow-lg);
    --theme-loading-overlay: rgba(15, 23, 42, 0.52);
}