/* Matthew appearance tokens: mode owns surfaces; theme owns accents. */
:root,
[data-appearance="light"] {
    color-scheme: light;
    --bg: #FFFFFF;
    --fg: #080808;
    --page-background: #F3F3F5;
    --app-background: #FFFFFF;
    --surface-1: #FFFFFF;
    --surface-2: #F6F6F7;
    --surface-3: #ECECEE;
    --surface-4: #E4E4E7;
    --text-primary: #080808;
    --text-secondary: #525252;
    --text-muted: #737373;
    --text-subtle: #A3A3A3;
    --border: rgba(8, 8, 8, 0.10);
    --border-strong: rgba(8, 8, 8, 0.18);
    --input-background: #F4F4F5;
    --input-background-focus: #FFFFFF;
    --card-background: #FFFFFF;
    --card-background-soft: #F6F6F7;
    --neutral-button-bg: #080808;
    --neutral-button-fg: #FFFFFF;
    --sidebar-base-bg: #FFFFFF;
    --sidebar-base-fg: #080808;
    --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 14px 40px rgba(18, 18, 18, 0.07);
    --shadow-floating: 0 18px 50px rgba(30, 20, 120, 0.10);
}

[data-appearance="dark"] {
    color-scheme: dark;
    --bg: #000000;
    --fg: #FFFFFF;
    --page-background: #000000;
    --app-background: #050505;
    --surface-1: #080808;
    --surface-2: #111111;
    --surface-3: #191919;
    --surface-4: #222222;
    --text-primary: #FFFFFF;
    --text-secondary: #D4D4D8;
    --text-muted: #A3A3A3;
    --text-subtle: #737373;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);
    --input-background: #111111;
    --input-background-focus: #191919;
    --card-background: #080808;
    --card-background-soft: #111111;
    --neutral-button-bg: #FFFFFF;
    --neutral-button-fg: #080808;
    --sidebar-base-bg: #080808;
    --sidebar-base-fg: #FFFFFF;
    --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.40);
    --shadow-card: 0 14px 40px rgba(0, 0, 0, 0.45);
    --shadow-floating: 0 18px 50px rgba(0, 0, 0, 0.50);
}

:root {
    --accent-gradient: linear-gradient(145deg, var(--accent-1) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
    --accent-soft: rgba(var(--accent-rgb), 0.10);
    --accent-border: rgba(var(--accent-rgb), 0.28);
    --accent-glow: rgba(var(--accent-rgb), 0.35);
    --primary-background: var(--accent-gradient);
    --primary-foreground: var(--on-accent);
    --focus-ring: 0 0 0 4px rgba(var(--accent-rgb), 0.22);
    --accent-shadow: 0 0 28px rgba(var(--accent-rgb), 0.22);
    --success: #34D878;
    --warning: #F5A623;
    --danger: #F05252;
    --info: #5CA8FF;

    /* Compatibility aliases for established Matthew components. */
    --muted: var(--text-muted);
    --subtle: var(--text-subtle);
    --color-primary: var(--accent-2);
    --color-primary-dark: var(--accent-1);
    --color-primary-light: var(--accent-3);
    --color-primary-soft: var(--accent-soft);
    --color-black: var(--neutral-button-bg);
    --color-ink: var(--text-primary);
    --color-text: var(--text-primary);
    --color-muted: var(--text-muted);
    --color-subtle: var(--text-subtle);
    --color-background: var(--page-background);
    --color-surface: var(--surface-1);
    --color-surface-soft: var(--surface-2);
    --color-surface-strong: var(--surface-3);
    --color-border: var(--border);
    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-danger: var(--danger);
    --color-info: var(--info);
}

[data-appearance="light"][data-theme="base"] { --accent-1: #080808; --accent-2: #171717; --accent-3: #292929; --accent-rgb: 23, 23, 23; --on-accent: #FFFFFF; }
[data-appearance="dark"][data-theme="base"] { --accent-1: #F5F5F5; --accent-2: #FFFFFF; --accent-3: #D4D4D8; --accent-rgb: 255, 255, 255; --on-accent: #080808; }
[data-theme="indigo"] { --accent-1: #3825E7; --accent-2: #5138F5; --accent-3: #6049FF; --accent-rgb: 81, 56, 245; --on-accent: #FFFFFF; }
[data-theme="violet"] { --accent-1: #A727E7; --accent-2: #B638F5; --accent-3: #C247FF; --accent-rgb: 182, 56, 245; --on-accent: #FFFFFF; }
[data-theme="rose"] { --accent-1: #E72787; --accent-2: #F53896; --accent-3: #FF47A3; --accent-rgb: 245, 56, 150; --on-accent: #FFFFFF; }
[data-theme="crimson"] { --accent-1: #E72747; --accent-2: #F53858; --accent-3: #FF4766; --accent-rgb: 245, 56, 88; --on-accent: #FFFFFF; }
[data-theme="cyan"] { --accent-1: #27C7E7; --accent-2: #38D5F5; --accent-3: #47E0FF; --accent-rgb: 56, 213, 245; --on-accent: #04252B; }
[data-theme="mint"] { --accent-1: #27E787; --accent-2: #38F596; --accent-3: #47FFA3; --accent-rgb: 56, 245, 150; --on-accent: #042B18; }
[data-theme="amber"] { --accent-1: #E77727; --accent-2: #F58738; --accent-3: #FF9447; --accent-rgb: 245, 135, 56; --on-accent: #2B1504; }
[data-theme="nebula"] { --accent-1: #3825E7; --accent-2: #8C2DF0; --accent-3: #C83CFF; --accent-rgb: 140, 45, 240; --on-accent: #FFFFFF; }

/* Fixed swatches show every option; Base follows the current mode. */
[data-appearance="light"] .theme-option[data-option-theme="base"] { --option-1:#080808; --option-2:#171717; --option-3:#292929; --option-on:#fff; }
[data-appearance="dark"] .theme-option[data-option-theme="base"] { --option-1:#F5F5F5; --option-2:#FFFFFF; --option-3:#D4D4D8; --option-on:#080808; }
.theme-option[data-option-theme="indigo"] { --option-1:#3825E7; --option-2:#5138F5; --option-3:#6049FF; --option-on:#fff; }
.theme-option[data-option-theme="violet"] { --option-1:#A727E7; --option-2:#B638F5; --option-3:#C247FF; --option-on:#fff; }
.theme-option[data-option-theme="rose"] { --option-1:#E72787; --option-2:#F53896; --option-3:#FF47A3; --option-on:#fff; }
.theme-option[data-option-theme="crimson"] { --option-1:#E72747; --option-2:#F53858; --option-3:#FF4766; --option-on:#fff; }
.theme-option[data-option-theme="cyan"] { --option-1:#27C7E7; --option-2:#38D5F5; --option-3:#47E0FF; --option-on:#04252B; }
.theme-option[data-option-theme="mint"] { --option-1:#27E787; --option-2:#38F596; --option-3:#47FFA3; --option-on:#042B18; }
.theme-option[data-option-theme="amber"] { --option-1:#E77727; --option-2:#F58738; --option-3:#FF9447; --option-on:#2B1504; }
.theme-option[data-option-theme="nebula"] { --option-1:#3825E7; --option-2:#8C2DF0; --option-3:#C83CFF; --option-on:#fff; }

.theme-transition,
.theme-transition * { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; }

@media (prefers-reduced-motion: reduce) {
    .theme-transition,
    .theme-transition * { transition: none !important; }
}