/* Charts Gallery v1.1 — Theme tokens (CSS Custom Properties)
 * Applied via `document.documentElement.dataset.theme = <key>`.
 * Key set: mono | editorial | vivid | pastel | dark | corporate | midnight | copilot
 */

:root {
    /* colors (defaults = mono) */
    --app-bg: #FAFAFA;
    --sidebar-bg: #FFFFFF;
    --sidebar-accent: #F1F0F5;
    --card-bg: #FFFFFF;
    --surface-1: #FFFFFF;
    --surface-2: #F7F7FA;
    --border: rgba(0,0,0,0.06);
    --border-strong: rgba(0,0,0,0.12);
    --text-primary: #1A1A1A;
    --text-muted: #8B8D98;
    --text-soft: #B3B5BF;
    --logo: #5E6AD2;
    --accent: #5E6AD2;
    --accent-soft: rgba(94,106,210,0.14);
    --accent-contrast: #FFFFFF;
    --chart-1: #5E6AD2;
    --chart-2: #A5A8BF;
    --chart-3: #C7C8D3;
    --chart-4: #7E84C7;
    --chart-5: #8B8D98;
    --chart-grid: rgba(0,0,0,0.05);
    --chart-tooltip-bg: #FFFFFF;

    /* design tokens (shared) */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.06);
    --shadow-glow: 0 0 0 3px var(--accent-soft);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 140ms;
    --duration-normal: 220ms;

    /* 'Noto Sans KR' 뒤에 'Malgun Gothic' 을 둔다. 동봉 폰트(cm/font/noto)에는 한자·화살표(→)·
       원문자(①)·※·℃·「」 가 없어서, 이들 글자는 다음 폰트로 넘어간다. Arial 로 넘어가면
       한자를 못 그려 시스템 기본까지 다시 밀리므로, 한글·한자를 모두 가진 서체를 바로 뒤에 둔다. */
    --font-display: 'Inter', 'Pretendard', 'Open Sans', 'Noto Sans KR', 'Malgun Gothic', Arial, sans-serif;
    --font-body: 'Inter', 'Pretendard', 'Open Sans', 'Noto Sans KR', 'Malgun Gothic', Arial, sans-serif;

    --kicker-size: 10px;
    --kicker-weight: 700;
    --kicker-spacing: 1.6px;
}

:root[data-theme="mono"] {
    --app-bg: #FAFAFA;
    --sidebar-bg: #FFFFFF;
    --sidebar-accent: #F1F0F5;
    --card-bg: #FFFFFF;
    --surface-1: #FFFFFF;
    --surface-2: #F5F5F8;
    --border: rgba(0,0,0,0.06);
    --border-strong: rgba(0,0,0,0.12);
    --text-primary: #0E0F1A;
    --text-muted: #6E7180;
    --text-soft: #A7A9B8;
    --logo: #5E6AD2;
    --accent: #5E6AD2;
    --accent-soft: rgba(94,106,210,0.14);
    --accent-contrast: #FFFFFF;
    --chart-1: #5E6AD2;
    --chart-2: #A5A8BF;
    --chart-3: #C7C8D3;
    --chart-4: #7E84C7;
    --chart-5: #8B8D98;
    --chart-grid: rgba(0,0,0,0.05);
    --chart-tooltip-bg: #FFFFFF;
}

:root[data-theme="editorial"] {
    --app-bg: #F5F2EA;
    --sidebar-bg: #FAFAF3;
    --sidebar-accent: #EEEBE0;
    --card-bg: #FDFBF4;
    --surface-1: #FDFBF4;
    --surface-2: #F0EDE2;
    --border: rgba(60,45,25,0.10);
    --border-strong: rgba(60,45,25,0.20);
    --text-primary: #1A1A1A;
    --text-muted: #6B6B65;
    --text-soft: #9A9A90;
    --logo: #1B3A5C;
    --accent: #C96442;
    --accent-soft: rgba(201,100,66,0.14);
    --accent-contrast: #FFFFFF;
    --chart-1: #1B3A5C;
    --chart-2: #C96442;
    --chart-3: #D4A574;
    --chart-4: #6B8BA4;
    --chart-5: #9AA8B5;
    --chart-grid: rgba(60,45,25,0.07);
    --chart-tooltip-bg: #FDFBF4;
}

:root[data-theme="vivid"] {
    --app-bg: #FAFAFA;
    --sidebar-bg: #FFFFFF;
    --sidebar-accent: #FFF0F0;
    --card-bg: #FFFFFF;
    --surface-1: #FFFFFF;
    --surface-2: #FFF5F5;
    --border: rgba(0,0,0,0.06);
    --border-strong: rgba(0,0,0,0.14);
    --text-primary: #1A1A1A;
    --text-muted: #7A7A7A;
    --text-soft: #BFBFBF;
    --logo: #FF6B6B;
    --accent: #FF6B6B;
    --accent-soft: rgba(255,107,107,0.15);
    --accent-contrast: #FFFFFF;
    --chart-1: #FF6B6B;
    --chart-2: #4ECDC4;
    --chart-3: #FFD93D;
    --chart-4: #A06CD5;
    --chart-5: #6BCB77;
    --chart-grid: rgba(0,0,0,0.05);
    --chart-tooltip-bg: #FFFFFF;
}

:root[data-theme="pastel"] {
    --app-bg: #FBF9F7;
    --sidebar-bg: #FFFFFF;
    --sidebar-accent: #F1ECE8;
    --card-bg: #FFFFFF;
    --surface-1: #FFFFFF;
    --surface-2: #F5F1EC;
    --border: rgba(74,74,74,0.07);
    --border-strong: rgba(74,74,74,0.14);
    --text-primary: #2E2E2E;
    --text-muted: #8F8B84;
    --text-soft: #BFBBB5;
    --logo: #A8BEE8;
    --accent: #7FA4E3;
    --accent-soft: rgba(127,164,227,0.18);
    --accent-contrast: #FFFFFF;
    --chart-1: #A8BEE8;
    --chart-2: #F2B8D4;
    --chart-3: #BEDDC0;
    --chart-4: #F5D5A0;
    --chart-5: #D4B8E4;
    --chart-grid: rgba(74,74,74,0.05);
    --chart-tooltip-bg: #FFFFFF;
}

:root[data-theme="dark"] {
    --app-bg: #07070C;
    --sidebar-bg: #0F0F18;
    --sidebar-accent: #1A1A26;
    --card-bg: #12121D;
    --surface-1: #12121D;
    --surface-2: #1A1A26;
    --border: rgba(255,255,255,0.07);
    --border-strong: rgba(255,255,255,0.16);
    --text-primary: #F5F5F7;
    --text-muted: rgba(255,255,255,0.60);
    --text-soft: rgba(255,255,255,0.38);
    --logo: #00D9C0;
    --accent: #00D9C0;
    --accent-soft: rgba(0,217,192,0.16);
    --accent-contrast: #08211E;
    --chart-1: #00D9C0;
    --chart-2: #B794F6;
    --chart-3: #FFB347;
    --chart-4: #FF6B9D;
    --chart-5: #4ECDC4;
    --chart-grid: rgba(255,255,255,0.07);
    --chart-tooltip-bg: #12121D;
}

/* Corporate Blue — Azulou ERP / B2B dashboard inspired. Cool, clean blue palette. */
:root[data-theme="corporate"] {
    --app-bg: #F4F7FB;
    --sidebar-bg: #FFFFFF;
    --sidebar-accent: #E8F0FA;
    --card-bg: #FFFFFF;
    --surface-1: #FFFFFF;
    --surface-2: #EEF3FA;
    --border: rgba(15,52,96,0.08);
    --border-strong: rgba(15,52,96,0.18);
    --text-primary: #0F2A4A;
    --text-muted: #5A6E84;
    --text-soft: #9BA8B8;
    --logo: #2563EB;
    --accent: #2563EB;
    --accent-soft: rgba(37,99,235,0.12);
    --accent-contrast: #FFFFFF;
    --chart-1: #2563EB;
    --chart-2: #06B6D4;
    --chart-3: #6366F1;
    --chart-4: #10B981;
    --chart-5: #F59E0B;
    --chart-grid: rgba(15,52,96,0.05);
    --chart-tooltip-bg: #FFFFFF;
}

/* Midnight Trade — B2B Energy Trading inspired. Deep navy with gold/cyan accents. */
:root[data-theme="midnight"] {
    --app-bg: #0A1428;
    --sidebar-bg: #0F1B33;
    --sidebar-accent: #1A2942;
    --card-bg: #142340;
    --surface-1: #142340;
    --surface-2: #1B2D4D;
    --border: rgba(149,176,224,0.10);
    --border-strong: rgba(149,176,224,0.24);
    --text-primary: #E8EEFA;
    --text-muted: #94A8C8;
    --text-soft: #6B7FA0;
    --logo: #FFC542;
    --accent: #FFC542;
    --accent-soft: rgba(255,197,66,0.14);
    --accent-contrast: #0A1428;
    --chart-1: #FFC542;
    --chart-2: #4DD4DA;
    --chart-3: #F472B6;
    --chart-4: #60A5FA;
    --chart-5: #A78BFA;
    --chart-grid: rgba(149,176,224,0.08);
    --chart-tooltip-bg: #142340;
}

/* AI Copilot — PM Engine AI inspired. Iridescent purple/cyan/pink on light lavender. */
:root[data-theme="copilot"] {
    --app-bg: #F8F7FE;
    --sidebar-bg: #FFFFFF;
    --sidebar-accent: #EFEBFE;
    --card-bg: #FFFFFF;
    --surface-1: #FFFFFF;
    --surface-2: #F4F0FE;
    --border: rgba(99,102,241,0.10);
    --border-strong: rgba(99,102,241,0.22);
    --text-primary: #1E1B4B;
    --text-muted: #6C6A8E;
    --text-soft: #A8A6BF;
    --logo: #7C3AED;
    --accent: #7C3AED;
    --accent-soft: rgba(124,58,237,0.13);
    --accent-contrast: #FFFFFF;
    --chart-1: #7C3AED;
    --chart-2: #06B6D4;
    --chart-3: #EC4899;
    --chart-4: #14B8A6;
    --chart-5: #F97316;
    --chart-grid: rgba(99,102,241,0.06);
    --chart-tooltip-bg: #FFFFFF;
}

html, body {
    background-color: var(--app-bg);
    color: var(--text-primary);
    transition: background-color var(--duration-normal) var(--ease-standard),
                color var(--duration-normal) var(--ease-standard);
}