/*
 * theme-variables.css — AccountEngine Theme Configuration Module (v1)
 * Product-grade token system with six classic themes.
 */

:root {
    color-scheme: dark;

    /* ── Theme identity (default: Midnight) ── */
    --bg-main: #1C1C28;
    --surface-1: #232433;
    --surface-2: #292C3D;
    --text-primary: #F2F4FF;
    --text-secondary: #CED3E7;
    --text-muted: #9AA3BE;
    --hairline-color: rgba(255, 255, 255, 0.16);
    --nav-glass-bg: rgba(28, 28, 40, 0.76);
    --nav-glass-border: rgba(255, 255, 255, 0.10);
    --privacy-mask-bg: #1C1C28;

    /* ── Semantic colors (constant across themes) ── */
    --color-expense: #FF3B30;
    --color-income: #34C759;
    --amount-expense: var(--color-expense);
    --amount-income: var(--color-income);
    --color-primary: #007AFF;
    --color-warning: #FF9500;
    --color-accent: #AF52DE;
    --color-teal: #30B0C7;
    --color-indigo: #5856D6;
    --ui-success: #30D158;
    --ui-danger: #FF453A;
    --chart-expense: var(--color-expense);
    --chart-income: var(--color-income);
    --chart-trend: var(--color-primary);
    --chart-grid-color: rgba(120, 128, 148, 0.24);
    --chart-grid-fs-color: rgba(255, 255, 255, 0.10);
    --chart-fs-tick-color: rgba(234, 238, 247, 0.78);
    --accent-soft-08: rgba(0, 122, 255, 0.08);
    --accent-soft-12: rgba(0, 122, 255, 0.12);
    --accent-soft-20: rgba(0, 122, 255, 0.20);
    --accent-border-40: rgba(0, 122, 255, 0.40);
    --accent-border-50: rgba(0, 122, 255, 0.50);
    --accent-border-60: rgba(0, 122, 255, 0.60);
    --accent-purple-soft-12: rgba(175, 82, 222, 0.12);
    --expense-soft-10: rgba(255, 59, 48, 0.10);
    --expense-soft-12: rgba(255, 59, 48, 0.12);
    --expense-soft-15: rgba(255, 59, 48, 0.15);
    --expense-soft-20: rgba(255, 59, 48, 0.20);
    --expense-soft-35: rgba(255, 59, 48, 0.35);
    --expense-strong-85: rgba(255, 59, 48, 0.85);
    --expense-strong-92: rgba(255, 59, 48, 0.92);
    --warning-soft-12: rgba(255, 149, 0, 0.12);
    --warning-soft-22: rgba(255, 149, 0, 0.22);
    --success-soft-10: rgba(48, 209, 88, 0.10);
    --success-soft-12: rgba(48, 209, 88, 0.12);
    --success-soft-15: rgba(48, 209, 88, 0.15);
    --danger-soft-10: rgba(255, 69, 58, 0.10);
    --danger-soft-12: rgba(255, 69, 58, 0.12);
    --danger-soft-20: rgba(255, 69, 58, 0.20);
    --danger-soft-35: rgba(255, 69, 58, 0.35);
    --income-soft-10: rgba(52, 199, 89, 0.10);
    --income-soft-12: rgba(52, 199, 89, 0.12);
    --income-soft-15: rgba(52, 199, 89, 0.15);
    --income-strong-95: rgba(52, 199, 89, 0.95);
    --neutral-soft-08: rgba(0, 0, 0, 0.08);
    --overlay-toast-bg: rgba(0, 0, 0, 0.78);
    --primary-shadow-20: 0 2px 8px rgba(0, 122, 255, 0.20);
    --primary-shadow-45: 0 8px 24px rgba(0, 122, 255, 0.45);
    --primary-shadow-60: 0 8px 32px rgba(0, 122, 255, 0.60);
    --expense-shadow-35: 0 4px 14px rgba(255, 59, 48, 0.35);
    --expense-shadow-45: 0 4px 16px rgba(255, 59, 48, 0.45);
    --income-shadow-30: 0 4px 16px rgba(52, 199, 89, 0.30);
    --income-shadow-40: 0 0 6px rgba(52, 199, 89, 0.40);

    /* ── Semantic aliases consumed by existing UI ── */
    --color-bg: var(--bg-main);
    --color-surface: var(--surface-1);
    --color-fill: var(--surface-2);
    --color-separator: var(--hairline-color);
    --color-text: var(--text-primary);
    --color-text-strong: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-muted: var(--text-muted);

    --ios-expense: var(--ui-danger);
    --ios-income: var(--ui-success);
    --ios-blue: var(--color-primary);
    --ios-orange: var(--color-warning);
    --ios-purple: var(--color-accent);
    --ios-teal: var(--color-teal);
    --ios-indigo: var(--color-indigo);
    --ios-red: var(--ui-danger);
    --ios-green: var(--ui-success);
    --ios-bg: var(--bg-main);
    --ios-card: var(--surface-1);
    --ios-fill: var(--surface-2);
    --ios-separator: var(--hairline-color);
    --ios-text: var(--text-primary);
    --ios-secondary: var(--text-secondary);
    --ios-muted: var(--text-muted);
    --ios-gray: var(--text-muted);

    --ae-primary: var(--color-primary);
    --ae-primary-light: #58AFFF;
    --ae-primary-dark: #0056B3;
    --ae-accent: var(--color-accent);
    --ae-success: var(--ui-success);
    --ae-danger: var(--ui-danger);
    --ae-warning: var(--color-warning);
    --ae-info: var(--color-primary);
    --ae-bg: var(--color-bg);
    --ae-card-bg: var(--color-surface);
    --ae-border: var(--color-separator);
    --ae-text: var(--color-text);
    --ae-text-muted: var(--color-text-muted);

    --system-background: var(--color-surface);
    --secondary-system-background: var(--color-bg);
    --system-gray-4: var(--color-separator);
    --system-gray-5: var(--color-fill);
    --system-gray-6: var(--color-bg);
    --label-color: var(--color-text);
    --secondary-label-color: var(--color-text-muted);
    --ios-label: var(--color-text);
    --ios-secondary-label: var(--color-text-muted);
    --system-blue: var(--color-primary);
    --system-green: var(--ui-success);
    --system-red: var(--ui-danger);
    --system-orange: var(--color-warning);

    --aey-system-bg: var(--color-bg);
    --aey-card-bg: var(--color-surface);
    --aey-primary-green: var(--amount-income);
    --aey-primary-red: var(--amount-expense);
    --aey-text-main: var(--color-text-strong);
    --aey-text-muted: var(--color-text-muted);
    --aey-muted: var(--color-text-muted);

    /* ── Components: amount keyboard tokens ── */
    --amount-kbd-bg: var(--surface-1);
    --amount-kbd-key-bg: var(--surface-1);
    --amount-kbd-func-bg: var(--surface-2);
    --amount-kbd-key-text: var(--text-primary);
    --amount-kbd-key-muted: var(--text-secondary);
    --amount-kbd-key-active-bg: var(--surface-2);
    --amount-kbd-confirm-bg: rgba(0, 122, 255, 0.12);

    /* ── Components: pie chart tokens ── */
    --pie-center-bg: var(--surface-1);
    --pie-center-text: var(--text-primary);
    --pie-legend-text: var(--text-secondary);
    --pie-empty-ring: rgba(120, 128, 148, 0.28);
    --modal-backdrop-bg: rgba(0, 0, 0, 0.55);
    --chart-fullscreen-bg: #0B0B0F;

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

    /* ── Radius (product spec) ── */
    --radius-lg: 15px;
    --radius-md: 12px;
    --radius-sm: 5px;
    --radius-pill: 100px;
    --ios-radius: var(--radius-lg);
    --ios-radius-sm: var(--radius-md);
    --ios-radius-xs: var(--radius-sm);
    --ae-radius: var(--radius-lg);
    --aey-radius: var(--radius-lg);

    /* ── Hairline / Shadow ── */
    --hairline-width: 0.5px;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.18);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.22);
    --shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.28);
    --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.04);
    --ios-shadow: var(--shadow-sm);
    --ios-shadow-md: var(--shadow-md);
    --ios-shadow-lg: var(--shadow-lg);
    --ae-shadow: var(--shadow-sm);
    --ae-shadow-md: var(--shadow-md);
    --aey-shadow: var(--shadow-sm);

    /* ── Typography ── */
    --font-body: -apple-system, BlinkMacSystemFont, 'Noto Sans TC', 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, Consolas, monospace;
    --text-xs: 0.72rem;
    --text-sm: 0.8rem;
    --text-base: 0.9rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.45rem;

    /* ── Glass ── */
    --glass-bg: var(--nav-glass-bg);
    --glass-border: var(--nav-glass-border);
    --glass-blur: saturate(180%) blur(20px);

    /* ── Layout ── */
    --page-padding-x: var(--space-4);
    --page-max-width: 1200px;
    --topbar-height: 56px;
    --topbar-sticky-top: calc(0px + env(safe-area-inset-top));
    --ae-topbar-height: var(--topbar-height);
    --ios-topbar-height: 0px;
    --ae-topbar-sticky-top: var(--topbar-sticky-top);

    /* ── Transition ── */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── Theme variants ───────────────────────────────────────────── */
[data-theme="midnight"] {
    color-scheme: dark;
    --bg-main: #1C1C28;
    --surface-1: #232433;
    --surface-2: #292C3D;
    --text-primary: #F2F4FF;
    --text-secondary: #CED3E7;
    --text-muted: #9AA3BE;
    --hairline-color: rgba(255, 255, 255, 0.16);
    --nav-glass-bg: rgba(28, 28, 40, 0.76);
    --nav-glass-border: rgba(255, 255, 255, 0.10);
    --privacy-mask-bg: #1C1C28;
}

[data-theme="modern-slate"] {
    color-scheme: dark;
    --bg-main: #2C3545;
    --surface-1: #353F52;
    --surface-2: #3D485D;
    --text-primary: #EEF3FF;
    --text-secondary: #CFD9EC;
    --text-muted: #A7B3CB;
    --hairline-color: rgba(255, 255, 255, 0.17);
    --nav-glass-bg: rgba(44, 53, 69, 0.76);
    --nav-glass-border: rgba(255, 255, 255, 0.10);
    --privacy-mask-bg: #2C3545;
}

[data-theme="pitch-black"] {
    color-scheme: dark;
    --bg-main: #000000;
    --surface-1: #050505;
    --surface-2: #101010;
    --text-primary: #F2F2F4;
    --text-secondary: #C9C9CE;
    --text-muted: #8E8E93;
    --hairline-color: rgba(255, 255, 255, 0.18);
    --nav-glass-bg: rgba(0, 0, 0, 0.84);
    --nav-glass-border: rgba(255, 255, 255, 0.12);
    --privacy-mask-bg: #000000;
}

[data-theme="midnight"],
[data-theme="modern-slate"],
[data-theme="pitch-black"] {
    --dark-object-border: rgba(255, 255, 255, 0.11);
    --dark-object-border-soft: rgba(255, 255, 255, 0.07);
    --dark-object-border-strong: rgba(255, 255, 255, 0.15);
    --dark-object-radius: 16px;
    --dark-object-ring: none;
    --dark-object-ring-strong: inset 0 0 0 var(--hairline-width) var(--dark-object-border-soft);
}

[data-theme="pure-white"] {
    color-scheme: light;
    --bg-main: #FFFFFF;
    --surface-1: #F5F7FA;
    --surface-2: #EDF1F5;
    --text-primary: #0E1623;
    --text-secondary: #28364B;
    --text-muted: #5E6B80;
    --hairline-color: #D1D1D6;
    --nav-glass-bg: rgba(255, 255, 255, 0.78);
    --nav-glass-border: rgba(60, 60, 67, 0.18);
    --privacy-mask-bg: #FFFFFF;
}

[data-theme="soft-stone"] {
    color-scheme: light;
    --bg-main: #E9ECEF;
    --surface-1: #DEE3E8;
    --surface-2: #D5DCE3;
    --text-primary: #111827;
    --text-secondary: #2D3A4B;
    --text-muted: #5A6678;
    --hairline-color: #D1D1D6;
    --nav-glass-bg: rgba(233, 236, 239, 0.78);
    --nav-glass-border: rgba(60, 60, 67, 0.18);
    --privacy-mask-bg: #E9ECEF;
}

[data-theme="ivory"] {
    color-scheme: light;
    --bg-main: #F8F9FA;
    --surface-1: #EFF2F4;
    --surface-2: #E7EBEF;
    --text-primary: #1C212B;
    --text-secondary: #3A4352;
    --text-muted: #667083;
    --hairline-color: #D1D1D6;
    --nav-glass-bg: rgba(248, 249, 250, 0.78);
    --nav-glass-border: rgba(60, 60, 67, 0.18);
    --privacy-mask-bg: #F8F9FA;
}

[data-theme="midnight"] .ae-card,
[data-theme="modern-slate"] .ae-card,
[data-theme="pitch-black"] .ae-card,
[data-theme="midnight"] .ae-card-surface,
[data-theme="modern-slate"] .ae-card-surface,
[data-theme="pitch-black"] .ae-card-surface,
[data-theme="midnight"] .aey-card,
[data-theme="modern-slate"] .aey-card,
[data-theme="pitch-black"] .aey-card,
[data-theme="midnight"] .cm-card,
[data-theme="modern-slate"] .cm-card,
[data-theme="pitch-black"] .cm-card,
[data-theme="midnight"] .dm-card,
[data-theme="modern-slate"] .dm-card,
[data-theme="pitch-black"] .dm-card,
[data-theme="midnight"] .mf-card,
[data-theme="modern-slate"] .mf-card,
[data-theme="pitch-black"] .mf-card,
[data-theme="midnight"] .pref-group,
[data-theme="modern-slate"] .pref-group,
[data-theme="pitch-black"] .pref-group,
[data-theme="midnight"] .stats-card,
[data-theme="modern-slate"] .stats-card,
[data-theme="pitch-black"] .stats-card,
[data-theme="midnight"] .ahs-kpi-item,
[data-theme="modern-slate"] .ahs-kpi-item,
[data-theme="pitch-black"] .ahs-kpi-item,
[data-theme="midnight"] .ae-dr-filter.is-fixed,
[data-theme="modern-slate"] .ae-dr-filter.is-fixed,
[data-theme="pitch-black"] .ae-dr-filter.is-fixed,
[data-theme="midnight"] .ae-attr-card,
[data-theme="modern-slate"] .ae-attr-card,
[data-theme="pitch-black"] .ae-attr-card,
[data-theme="midnight"] .pm-card,
[data-theme="modern-slate"] .pm-card,
[data-theme="pitch-black"] .pm-card,
[data-theme="midnight"] .tmpl-main-card,
[data-theme="modern-slate"] .tmpl-main-card,
[data-theme="pitch-black"] .tmpl-main-card,
[data-theme="midnight"] .ae-select-option,
[data-theme="modern-slate"] .ae-select-option,
[data-theme="pitch-black"] .ae-select-option {
    border-radius: var(--dark-object-radius) !important;
    box-shadow: var(--dark-object-ring) !important;
}

[data-theme="midnight"] .ae-list-row,
[data-theme="modern-slate"] .ae-list-row,
[data-theme="pitch-black"] .ae-list-row,
[data-theme="midnight"] .ios-list-group,
[data-theme="modern-slate"] .ios-list-group,
[data-theme="pitch-black"] .ios-list-group,
[data-theme="midnight"] .ios-filter-card,
[data-theme="modern-slate"] .ios-filter-card,
[data-theme="pitch-black"] .ios-filter-card,
[data-theme="midnight"] .ae-bottom-sheet,
[data-theme="modern-slate"] .ae-bottom-sheet,
[data-theme="pitch-black"] .ae-bottom-sheet,
[data-theme="midnight"] .ae-modal-content,
[data-theme="modern-slate"] .ae-modal-content,
[data-theme="pitch-black"] .ae-modal-content,
[data-theme="midnight"] .ae-account-picker-sheet,
[data-theme="modern-slate"] .ae-account-picker-sheet,
[data-theme="pitch-black"] .ae-account-picker-sheet,
[data-theme="midnight"] .ae-select-sheet,
[data-theme="modern-slate"] .ae-select-sheet,
[data-theme="pitch-black"] .ae-select-sheet,
[data-theme="midnight"] .ae-date-picker,
[data-theme="modern-slate"] .ae-date-picker,
[data-theme="pitch-black"] .ae-date-picker,
[data-theme="midnight"] .ae-time-picker,
[data-theme="modern-slate"] .ae-time-picker,
[data-theme="pitch-black"] .ae-time-picker,
[data-theme="midnight"] .cm-modal,
[data-theme="modern-slate"] .cm-modal,
[data-theme="pitch-black"] .cm-modal,
[data-theme="midnight"] .ios-tx-item,
[data-theme="modern-slate"] .ios-tx-item,
[data-theme="pitch-black"] .ios-tx-item,
[data-theme="midnight"] .stats-modal-tx-item,
[data-theme="modern-slate"] .stats-modal-tx-item,
[data-theme="pitch-black"] .stats-modal-tx-item {
    border-color: var(--dark-object-border) !important;
}

[data-theme="midnight"] .ios-input,
[data-theme="modern-slate"] .ios-input,
[data-theme="pitch-black"] .ios-input,
[data-theme="midnight"] .ae-input-bordered,
[data-theme="modern-slate"] .ae-input-bordered,
[data-theme="pitch-black"] .ae-input-bordered,
[data-theme="midnight"] .ae-date-picker-trigger,
[data-theme="modern-slate"] .ae-date-picker-trigger,
[data-theme="pitch-black"] .ae-date-picker-trigger,
[data-theme="midnight"] .ae-dr-date-input,
[data-theme="modern-slate"] .ae-dr-date-input,
[data-theme="pitch-black"] .ae-dr-date-input,
[data-theme="midnight"] .tmpl-input,
[data-theme="modern-slate"] .tmpl-input,
[data-theme="pitch-black"] .tmpl-input,
[data-theme="midnight"] .tmpl-picker-trigger,
[data-theme="modern-slate"] .tmpl-picker-trigger,
[data-theme="pitch-black"] .tmpl-picker-trigger,
[data-theme="midnight"] .pm-input,
[data-theme="modern-slate"] .pm-input,
[data-theme="pitch-black"] .pm-input,
[data-theme="midnight"] .ae-select-trigger,
[data-theme="modern-slate"] .ae-select-trigger,
[data-theme="pitch-black"] .ae-select-trigger {
    border-color: var(--dark-object-border-strong) !important;
}

[data-theme="midnight"] .account-form-shell,
[data-theme="modern-slate"] .account-form-shell,
[data-theme="pitch-black"] .account-form-shell,
[data-theme="midnight"] .aey-group-card,
[data-theme="modern-slate"] .aey-group-card,
[data-theme="pitch-black"] .aey-group-card,
[data-theme="midnight"] .tx-flow-card,
[data-theme="modern-slate"] .tx-flow-card,
[data-theme="pitch-black"] .tx-flow-card,
[data-theme="midnight"] .stats-page .stats-card,
[data-theme="modern-slate"] .stats-page .stats-card,
[data-theme="pitch-black"] .stats-page .stats-card,
[data-theme="midnight"] .ahs-page .ae-card,
[data-theme="modern-slate"] .ahs-page .ae-card,
[data-theme="pitch-black"] .ahs-page .ae-card,
[data-theme="midnight"] .ahs-page .ahs-kpi-item,
[data-theme="modern-slate"] .ahs-page .ahs-kpi-item,
[data-theme="pitch-black"] .ahs-page .ahs-kpi-item {
    border: none !important;
    box-shadow: none !important;
}

/* ── Global theme transitions (0.3s) ────────────────────────── */
html,
body,
.ios-shell,
.ios-content-wrapper,
.ios-main,
.ios-container,
.ae-card,
.ae-card-surface,
.pref-group,
.mf-card,
.ae-amtkbd,
.ae-amtkbd-btn,
.ae-amtkbd-display,
.ae-amtkbd-quick,
.ae-list-row,
.ae-settings-topbar {
    transition: background-color var(--transition-slow),
                color var(--transition-slow),
                border-color var(--transition-slow),
                box-shadow var(--transition-slow);
}

/* Pitch Black privacy mode keeps the replacement label visible. */
[data-theme="pitch-black"] .privacy-mode .privacy-blur,
[data-theme="pitch-black"] .privacy-mode .ios-hero-value,
[data-theme="pitch-black"] .privacy-mode .ae-stat-value {
    text-shadow: none !important;
}