/*
 * ACE Core UI System - Phase 2
 * Global dark/light/system theme variable layer.
 */

:root {
    color-scheme: light;
    --ace-theme-mode: light;
    --ace-theme-resolved: light;
    --ace-accent: var(--ace-primary);
    --ace-accent-hover: var(--ace-primary-hover);
    --ace-accent-active: var(--ace-primary-active);
    --ace-bg-page: #f3f6fb;
    --ace-bg-muted: #e9eef6;
    --ace-bg-inverse: #111c2d;
    --ace-surface-1: #fbfcfe;
    --ace-surface-2: #f6f8fb;
    --ace-surface-3: #edf1f7;
    --ace-surface-inverse: #101728;
    --ace-card-bg: rgba(251, 252, 254, 0.96);
    --ace-card-border: rgba(113, 130, 153, 0.22);
    --ace-text: #111c2d;
    --ace-text-muted: #53657a;
    --ace-text-subtle: #718299;
    --ace-text-inverse: #f7faff;
    --ace-border-color: rgba(113, 130, 153, 0.22);
    --ace-border-color-strong: rgba(83, 101, 122, 0.34);
    --ace-focus-ring: 0 0 0 3px rgba(47, 128, 237, 0.26);
    --ace-hover-surface: rgba(47, 128, 237, 0.08);
    --ace-card-radius: 10px;
    --ace-button-radius: 10px;
    --ace-form-control-radius: 10px;
    --ace-ui-density: 0.9;
    --bg: #eef6ff;
    --bg-soft: #dcecff;
    --panel: rgba(246, 250, 255, 0.98);
    --panel-soft: rgba(235, 243, 252, 0.95);
    --panel-deep: rgba(255, 255, 255, 0.96);
    --border: rgba(82, 117, 155, 0.25);
    --text: #0c1727;
    --muted: #53677e;
    --cyan: #0d8bbb;
    --blue: #2f80ed;
    --success: #219653;
    --warning: #b46a00;
    --danger: #d9435f;
    --bg-a: #eef6ff;
    --bg-b: #dcecff;
    --card: rgba(246, 250, 255, 0.98);
    --card-soft: rgba(235, 243, 252, 0.95);
}

/* ACE-UI-FIX-02: approved modern UI reference palette. */
:root {
    --ace-reference-bg: #0b1220;
    --ace-reference-bg-2: #0f172a;
    --ace-reference-sidebar: #111827;
    --ace-reference-surface: #151e2e;
    --ace-reference-surface-2: #182235;
    --ace-reference-surface-hover: #1d2a40;
    --ace-reference-border: rgba(148, 163, 184, 0.16);
    --ace-reference-text: #f8fafc;
    --ace-reference-muted: #cbd5e1;
    --ace-reference-subtle: #94a3b8;
    --ace-reference-blue: #3b82f6;
    --ace-reference-violet: #8b5cf6;
    --ace-reference-green: #22c55e;
    --ace-reference-amber: #f59e0b;
    --ace-reference-red: #ef4444;
    --ace-card-radius: 10px;
    --ace-button-radius: 9px;
    --ace-form-control-radius: 8px;
    --ace-ui-density: 0.92;
}

:root[data-ace-theme="dark"],
body[data-theme="dark"] {
    --ace-bg-page: var(--ace-reference-bg);
    --ace-bg-muted: var(--ace-reference-bg-2);
    --ace-surface-1: var(--ace-reference-sidebar);
    --ace-surface-2: var(--ace-reference-surface);
    --ace-surface-3: var(--ace-reference-surface-2);
    --ace-card-bg: rgba(21, 30, 46, 0.96);
    --ace-card-border: var(--ace-reference-border);
    --ace-text: var(--ace-reference-text);
    --ace-text-muted: var(--ace-reference-muted);
    --ace-text-subtle: var(--ace-reference-subtle);
    --ace-border-color: var(--ace-reference-border);
    --ace-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.26);
    --bg: var(--ace-reference-bg);
    --bg-soft: var(--ace-reference-bg-2);
    --panel: var(--ace-reference-surface);
    --panel-soft: var(--ace-reference-surface-2);
    --panel-deep: var(--ace-reference-sidebar);
    --border: var(--ace-reference-border);
    --text: var(--ace-reference-text);
    --muted: var(--ace-reference-muted);
    --cyan: #60a5fa;
    --blue: var(--ace-reference-blue);
    --success: var(--ace-reference-green);
    --warning: var(--ace-reference-amber);
    --danger: var(--ace-reference-red);
    --card: var(--ace-reference-surface);
    --card-soft: var(--ace-reference-surface-2);
}

:root[data-ace-theme="dark"] body[data-ace-theme-scope="acpanel"],
:root[data-ace-theme="dark"] body[data-ace-theme-scope="auth"] {
    background:
        radial-gradient(circle at 16% 0%, rgba(59, 130, 246, 0.13), transparent 28%),
        radial-gradient(circle at 90% 12%, rgba(139, 92, 246, 0.12), transparent 30%),
        linear-gradient(145deg, #0b1220 0%, #0f172a 58%, #0b1220 100%);
}

:root[data-ace-theme="light"] body[data-ace-theme-scope="acpanel"],
:root[data-ace-theme="light"] body[data-ace-theme-scope="auth"] {
    background:
        radial-gradient(circle at 18% 0%, rgba(59, 130, 246, 0.1), transparent 28%),
        linear-gradient(145deg, #f8fbff 0%, #eef5ff 58%, #ffffff 100%);
}

:root[data-ace-density="compact"] {
    --ace-card-padding: 14px;
    --ace-form-control-height: 36px;
    --ace-button-height-md: 36px;
    --ace-ui-density: 0.9;
}

:root[data-ace-density="normal"] {
    --ace-card-padding: 18px;
    --ace-form-control-height: 40px;
    --ace-button-height-md: 40px;
    --ace-ui-density: 1;
}

:root[data-ace-density="comfortable"] {
    --ace-card-padding: 22px;
    --ace-form-control-height: 44px;
    --ace-button-height-md: 44px;
    --ace-ui-density: 1.12;
}

:root[data-ace-card-style="flat"] {
    --ace-shadow-xs: none;
    --ace-shadow-sm: none;
}

:root[data-ace-card-style="elevated"] {
    --ace-shadow-xs: 0 12px 30px rgba(5, 12, 24, 0.22);
    --ace-shadow-sm: 0 18px 44px rgba(5, 12, 24, 0.28);
}

:root[data-ace-button-style="outline"] {
    --ace-button-bg: transparent;
    --ace-button-border-color: var(--ace-accent);
}

:root[data-ace-button-style="soft"] {
    --ace-button-bg: color-mix(in srgb, var(--ace-accent) 16%, transparent);
}

:root[data-ace-theme="dark"],
body[data-theme="dark"] {
    color-scheme: dark;
    --ace-theme-resolved: dark;
    --ace-bg-page: #0b1220;
    --ace-bg-muted: #111b2d;
    --ace-bg-inverse: #f6f8fb;
    --ace-surface-1: #111a2c;
    --ace-surface-2: #151f34;
    --ace-surface-3: #1c2940;
    --ace-surface-inverse: #f7faff;
    --ace-card-bg: rgba(17, 26, 44, 0.96);
    --ace-card-border: rgba(157, 168, 196, 0.22);
    --ace-text: #edf1ff;
    --ace-text-muted: #a8b3ca;
    --ace-text-subtle: #8996af;
    --ace-text-inverse: #111c2d;
    --ace-border-color: rgba(157, 168, 196, 0.22);
    --ace-border-color-strong: rgba(184, 196, 220, 0.34);
    --ace-focus-ring: 0 0 0 3px rgba(80, 168, 255, 0.28);
    --ace-hover-surface: rgba(80, 168, 255, 0.11);
    --bg: #06111f;
    --bg-soft: #0a1b32;
    --panel: rgba(13, 28, 48, 0.96);
    --panel-soft: rgba(17, 37, 63, 0.92);
    --panel-deep: rgba(7, 18, 34, 0.96);
    --border: rgba(114, 160, 210, 0.26);
    --text: #f4f8ff;
    --muted: #9fb2c9;
    --cyan: #42c8ff;
    --blue: #2f80ed;
    --success: #54d38f;
    --warning: #ffd166;
    --danger: #ff6f87;
    --bg-a: #06111f;
    --bg-b: #0a1b32;
    --card: rgba(13, 28, 48, 0.96);
    --card-soft: rgba(17, 37, 63, 0.9);
}

:root[data-ace-theme="light"],
body[data-theme="light"] {
    color-scheme: light;
    --ace-theme-resolved: light;
}

:root[data-ace-theme="light"] body[data-ace-theme-scope="acpanel"] {
    background:
        radial-gradient(circle at 20% 8%, rgba(47, 128, 237, 0.13), transparent 28%),
        linear-gradient(145deg, #eef6ff, #f7fbff);
}

:root[data-ace-theme="dark"] body[data-ace-theme-scope="acpanel"] {
    background:
        radial-gradient(circle at 20% 8%, rgba(47, 128, 237, 0.18), transparent 28%),
        radial-gradient(circle at 78% 18%, rgba(63, 191, 255, 0.09), transparent 30%),
        linear-gradient(145deg, #050b15, #081525 54%, #050a13);
}

:root[data-ace-theme="light"] body[data-ace-theme-scope="auth"] {
    background: linear-gradient(145deg, #eef6ff, #dcecff 55%, #f8fbff);
}

:root[data-ace-theme="dark"] body[data-ace-theme-scope="auth"] {
    background:
        radial-gradient(circle at 18% 8%, rgba(66, 200, 255, 0.16), transparent 28%),
        linear-gradient(145deg, var(--bg-a), var(--bg-b) 55%, #050a14);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-ace-theme]) {
        color-scheme: dark;
        --ace-theme-mode: system;
        --ace-theme-resolved: dark;
        --ace-bg-page: #0b1220;
        --ace-bg-muted: #111b2d;
        --ace-surface-1: #111a2c;
        --ace-surface-2: #151f34;
        --ace-surface-3: #1c2940;
        --ace-card-bg: rgba(17, 26, 44, 0.96);
        --ace-card-border: rgba(157, 168, 196, 0.22);
        --ace-text: #edf1ff;
        --ace-text-muted: #a8b3ca;
        --ace-text-subtle: #8996af;
        --ace-border-color: rgba(157, 168, 196, 0.22);
        --bg: #06111f;
        --bg-soft: #0a1b32;
        --panel: rgba(13, 28, 48, 0.96);
        --panel-soft: rgba(17, 37, 63, 0.92);
        --panel-deep: rgba(7, 18, 34, 0.96);
        --border: rgba(114, 160, 210, 0.26);
        --text: #f4f8ff;
        --muted: #9fb2c9;
        --cyan: #42c8ff;
        --blue: #2f80ed;
        --success: #54d38f;
        --warning: #ffd166;
        --danger: #ff6f87;
        --bg-a: #06111f;
        --bg-b: #0a1b32;
        --card: rgba(13, 28, 48, 0.96);
        --card-soft: rgba(17, 37, 63, 0.9);
    }
}

/* ACE-UI-FIX-02 final reference lock. */
:root[data-ace-theme="dark"] body[data-ace-theme-scope="acpanel"],
:root[data-ace-theme="dark"] body[data-ace-theme-scope="auth"] {
    background:
        radial-gradient(circle at 16% 0%, rgba(59, 130, 246, 0.13), transparent 28%),
        radial-gradient(circle at 90% 12%, rgba(139, 92, 246, 0.12), transparent 30%),
        linear-gradient(145deg, #0b1220 0%, #0f172a 58%, #0b1220 100%);
}

:root[data-ace-theme="light"] body[data-ace-theme-scope="acpanel"],
:root[data-ace-theme="light"] body[data-ace-theme-scope="auth"] {
    background:
        radial-gradient(circle at 18% 0%, rgba(59, 130, 246, 0.1), transparent 28%),
        linear-gradient(145deg, #f8fbff 0%, #eef5ff 58%, #ffffff 100%);
}