/*
   SR-MEDIA THEMES
   ----------------
   Every theme owns a complete tonal scale. Accent colors are intentionally
   kept out of large surfaces so cards stay readable and visually consistent.
*/

:root {
    --theme-primary-rgb: 99, 102, 241;
    --theme-secondary-rgb: 167, 139, 250;
    --theme-foreground-rgb: 250, 250, 250;
    --theme-success-rgb: 16, 185, 129;
    --theme-warning-rgb: 245, 158, 11;
    --theme-danger-rgb: 239, 68, 68;

    --color-on-primary: #ffffff;
    --color-bg-control: var(--color-bg-base);
    --color-bg-card: var(--color-bg-elevated);
    --color-bg-hover: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
    --color-bg-hover-strong: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    --color-bg-primary-soft: color-mix(in srgb, var(--color-primary) 13%, transparent);
    --color-bg-success-soft: color-mix(in srgb, var(--color-success) 13%, transparent);
    --color-bg-warning-soft: color-mix(in srgb, var(--color-warning) 13%, transparent);
    --color-bg-danger-soft: color-mix(in srgb, var(--color-danger) 13%, transparent);

    /* Compatibility aliases for dashboard components using the compact tokens. */
    --color-bg: var(--color-bg-base);
    --color-surface: var(--color-bg-surface);
    --color-border: var(--border-color-light);
    --color-text-tertiary: var(--color-text-subtle);

    --gradient-hero: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-surface) 50%, var(--color-bg-elevated) 100%);
    --gradient-card: linear-gradient(145deg,
        color-mix(in srgb, var(--color-bg-elevated) 96%, var(--color-primary) 4%) 0%,
        color-mix(in srgb, var(--color-bg-surface) 98%, var(--color-primary) 2%) 100%);
    --gradient-card-hover: linear-gradient(145deg,
        color-mix(in srgb, var(--color-bg-elevated) 92%, var(--color-primary) 8%) 0%,
        color-mix(in srgb, var(--color-bg-surface) 95%, var(--color-primary) 5%) 100%);
    --gradient-border: linear-gradient(135deg,
        rgba(var(--theme-primary-rgb), 0.5),
        rgba(var(--theme-secondary-rgb), 0.45));
    --gradient-glow: radial-gradient(circle at 50% 50%, rgba(var(--theme-primary-rgb), 0.12) 0%, transparent 70%);
    --gradient-mesh:
        radial-gradient(at 27% 37%, rgba(var(--theme-primary-rgb), 0.075) 0, transparent 50%),
        radial-gradient(at 97% 21%, rgba(var(--theme-secondary-rgb), 0.05) 0, transparent 50%),
        radial-gradient(at 52% 99%, rgba(var(--theme-success-rgb), 0.035) 0, transparent 50%);

    --border-color: rgba(var(--theme-foreground-rgb), 0.075);
    --border-color-light: rgba(var(--theme-foreground-rgb), 0.13);
    --border-color-focus: rgba(var(--theme-primary-rgb), 0.58);
    --glow-primary: 0 0 40px rgba(var(--theme-primary-rgb), 0.12);
    --glow-primary-strong: 0 0 60px rgba(var(--theme-primary-rgb), 0.2);
    --shadow-glow: 0 8px 32px rgba(var(--theme-primary-rgb), 0.1);
    --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(var(--theme-primary-rgb), 0.18);
    --app-card-art-overlay:
        linear-gradient(90deg,
            color-mix(in srgb, var(--color-bg-surface) 42%, transparent) 0%,
            color-mix(in srgb, var(--color-bg-surface) 12%, transparent) 46%,
            transparent 78%),
        linear-gradient(180deg,
            transparent 0%,
            transparent 62%,
            color-mix(in srgb, var(--color-bg-surface) 24%, transparent) 100%);
    --app-card-art-opacity: 1;
    --app-card-art-filter: none;
    --app-card-art-blend-mode: normal;

    /* Keep Bootstrap utilities and native controls on the active palette. */
    --bs-body-color: var(--color-text-secondary);
    --bs-body-bg: var(--color-bg-body);
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--theme-primary-rgb);
    --bs-secondary-color: var(--color-text-muted);
    --bs-tertiary-color: var(--color-text-subtle);
    --bs-border-color: var(--border-color-light);
    --bs-link-color: var(--color-primary-light);
    --bs-link-hover-color: var(--color-primary);
}

html[data-theme] {
    color-scheme: dark;
}

/* 1. Obsidian Glass */
[data-theme="obsidian"] {
    --color-bg-base: #09090b;
    --color-bg-body: #0c0c10;
    --color-bg-elevated: #141418;
    --color-bg-surface: #1c1c22;
    --color-bg-subtle: #27272a;
    --color-text-primary: #fafafa;
    --color-text-secondary: #d4d4d8;
    --color-text-muted: #a1a1aa;
    --color-text-subtle: #85858f;
    --color-primary: #6366f1;
    --color-primary-light: #818cf8;
    --color-primary-dark: #4f46e5;
    --color-secondary: #a78bfa;
    --color-accent: #38bdf8;
    --color-on-primary: #ffffff;
    --theme-primary-rgb: 99, 102, 241;
    --theme-secondary-rgb: 167, 139, 250;
    --theme-foreground-rgb: 250, 250, 250;
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

/* 2. Midnight Emerald */
[data-theme="emerald"] {
    --color-bg-base: #050b0a;
    --color-bg-body: #07110f;
    --color-bg-elevated: #0c1a17;
    --color-bg-surface: #11241f;
    --color-bg-subtle: #1a332b;
    --color-text-primary: #f0fdf8;
    --color-text-secondary: #c8ded5;
    --color-text-muted: #91aa9f;
    --color-text-subtle: #789188;
    --color-primary: #10b981;
    --color-primary-light: #34d399;
    --color-primary-dark: #059669;
    --color-secondary: #2dd4bf;
    --color-accent: #5eead4;
    --color-on-primary: #03251b;
    --theme-primary-rgb: 16, 185, 129;
    --theme-secondary-rgb: 45, 212, 191;
    --theme-foreground-rgb: 240, 253, 248;
    --gradient-primary: linear-gradient(135deg, #10b981 0%, #0d9488 100%);
}

/* 3. Arctic Ice */
[data-theme="arctic"] {
    --color-bg-base: #07101d;
    --color-bg-body: #0a1424;
    --color-bg-elevated: #101e31;
    --color-bg-surface: #172a43;
    --color-bg-subtle: #213a56;
    --color-text-primary: #f5faff;
    --color-text-secondary: #cfdfed;
    --color-text-muted: #95adbf;
    --color-text-subtle: #7f99ad;
    --color-primary: #0ea5e9;
    --color-primary-light: #38bdf8;
    --color-primary-dark: #0284c7;
    --color-secondary: #60a5fa;
    --color-accent: #67e8f9;
    --color-on-primary: #041722;
    --theme-primary-rgb: 14, 165, 233;
    --theme-secondary-rgb: 96, 165, 250;
    --theme-foreground-rgb: 245, 250, 255;
    --gradient-primary: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
}

/* 4. Crimson Forge */
[data-theme="crimson"] {
    --color-bg-base: #10090b;
    --color-bg-body: #160d10;
    --color-bg-elevated: #211417;
    --color-bg-surface: #2c1b20;
    --color-bg-subtle: #3a252b;
    --color-text-primary: #fff7f7;
    --color-text-secondary: #ead3d5;
    --color-text-muted: #b6979b;
    --color-text-subtle: #a8868b;
    --color-primary: #ef4444;
    --color-primary-light: #fb7185;
    --color-primary-dark: #dc2626;
    --color-secondary: #f97316;
    --color-accent: #fda4af;
    --color-on-primary: #230506;
    --theme-primary-rgb: 239, 68, 68;
    --theme-secondary-rgb: 249, 115, 22;
    --theme-foreground-rgb: 255, 247, 247;
    --gradient-primary: linear-gradient(135deg, #ef4444 0%, #be123c 100%);
}

/* 5. Sunset Amber */
[data-theme="amber"] {
    --color-bg-base: #110d08;
    --color-bg-body: #18120b;
    --color-bg-elevated: #241b11;
    --color-bg-surface: #302419;
    --color-bg-subtle: #3e2f20;
    --color-text-primary: #fffaf0;
    --color-text-secondary: #e8dcc6;
    --color-text-muted: #b5a184;
    --color-text-subtle: #ad9674;
    --color-primary: #f59e0b;
    --color-primary-light: #fbbf24;
    --color-primary-dark: #d97706;
    --color-secondary: #fb7185;
    --color-accent: #fcd34d;
    --color-on-primary: #2a1702;
    --theme-primary-rgb: 245, 158, 11;
    --theme-secondary-rgb: 251, 113, 133;
    --theme-foreground-rgb: 255, 250, 240;
    --gradient-primary: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
}

/* 6. Neon Synthwave */
[data-theme="synthwave"] {
    --color-bg-base: #090611;
    --color-bg-body: #0e091a;
    --color-bg-elevated: #171025;
    --color-bg-surface: #211633;
    --color-bg-subtle: #302047;
    --color-text-primary: #fff4fb;
    --color-text-secondary: #ebd4e7;
    --color-text-muted: #b799b3;
    --color-text-subtle: #9a7e96;
    --color-primary: #ec4899;
    --color-primary-light: #f472b6;
    --color-primary-dark: #db2777;
    --color-secondary: #8b5cf6;
    --color-accent: #22d3ee;
    --color-on-primary: #280617;
    --theme-primary-rgb: 236, 72, 153;
    --theme-secondary-rgb: 139, 92, 246;
    --theme-foreground-rgb: 255, 244, 251;
    --gradient-primary: linear-gradient(135deg, #ec4899 0%, #7c3aed 100%);
}

/* Shared baseline for all light themes. */
html:is(
    [data-theme="polaris"],
    [data-theme="aurora"],
    [data-theme="sage"],
    [data-theme="sandstone"],
    [data-theme="cloud"],
    [data-theme="rose"],
    [data-theme="lagoon"],
    [data-theme="citrus"],
    [data-theme="iris"],
    [data-theme="coral"]
) {
    color-scheme: light;
    --color-success: #087754;
    --color-success-light: #087754;
    --color-success-dark: #065e42;
    --color-warning: #9a5908;
    --color-warning-light: #7b4606;
    --color-danger: #bd3045;
    --color-danger-light: #9e2538;
    --color-info: #166b9b;
    --theme-success-rgb: 8, 119, 84;
    --theme-warning-rgb: 154, 89, 8;
    --theme-danger-rgb: 189, 48, 69;
    --shadow-sm: 0 1px 3px rgba(var(--theme-foreground-rgb), 0.08), 0 1px 2px rgba(var(--theme-foreground-rgb), 0.05);
    --shadow-md: 0 4px 16px rgba(var(--theme-foreground-rgb), 0.10);
    --shadow-lg: 0 12px 40px rgba(var(--theme-foreground-rgb), 0.12);
    --shadow-xl: 0 20px 60px rgba(var(--theme-foreground-rgb), 0.16);
    --shadow-card: 0 1px 3px rgba(var(--theme-foreground-rgb), 0.08), 0 0 0 1px rgba(var(--theme-primary-rgb), 0.04);
    --shadow-card-hover: 0 12px 36px rgba(var(--theme-foreground-rgb), 0.13), 0 0 0 1px rgba(var(--theme-primary-rgb), 0.16);
    --app-card-art-overlay: linear-gradient(90deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.30) 42%, transparent 78%);
    --app-card-art-opacity: .78;
    --app-card-art-filter: none;
    --app-card-art-blend-mode: normal;
}

/* 7. Polaris Light */
html[data-theme="polaris"], .theme-thumbnail[data-theme="polaris"] {
    color-scheme: light;
    --color-bg-base: #ffffff;
    --color-bg-body: #f4f7fb;
    --color-bg-elevated: #e9eff7;
    --color-bg-surface: #ffffff;
    --color-bg-subtle: #dce6f1;
    --color-text-primary: #0f1b2d;
    --color-text-secondary: #33445c;
    --color-text-muted: #61738a;
    --color-text-subtle: #5b6e86;
    --color-primary: #2563eb;
    --color-primary-light: #1d4ed8;
    --color-primary-dark: #1e40af;
    --color-secondary: #0f766e;
    --color-accent: #0369a1;
    --color-success: #047857;
    --color-success-light: #047857;
    --color-success-dark: #065f46;
    --color-warning: #b45309;
    --color-warning-light: #92400e;
    --color-danger: #dc2626;
    --color-danger-light: #b91c1c;
    --color-info: #0369a1;
    --color-on-primary: #ffffff;
    --theme-primary-rgb: 37, 99, 235;
    --theme-secondary-rgb: 15, 118, 110;
    --theme-foreground-rgb: 15, 27, 45;
    --theme-success-rgb: 4, 120, 87;
    --theme-warning-rgb: 180, 83, 9;
    --theme-danger-rgb: 220, 38, 38;
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.1);
    --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.16);
    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.035);
    --shadow-card-hover: 0 12px 36px rgba(15, 23, 42, 0.13), 0 0 0 1px rgba(37, 99, 235, 0.16);
    --app-card-art-overlay:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.34) 36%,
            rgba(255, 255, 255, 0.06) 70%,
            transparent 100%),
        linear-gradient(180deg,
            transparent 0%,
            rgba(255, 255, 255, 0.06) 100%);
    --app-card-art-opacity: 0.82;
    --app-card-art-filter: none;
    --app-card-art-blend-mode: normal;
}

/* 8. Aurora Light */
html[data-theme="aurora"], .theme-thumbnail[data-theme="aurora"] {
    color-scheme: light;
    --color-bg-base: #fbfaff;
    --color-bg-body: #f5f3ff;
    --color-bg-elevated: #ebe8ff;
    --color-bg-surface: #ffffff;
    --color-bg-subtle: #ddd7ff;
    --color-text-primary: #221b3d;
    --color-text-secondary: #443b66;
    --color-text-muted: #665e85;
    --color-text-subtle: #756d92;
    --color-primary: #6d4aff;
    --color-primary-light: #5b36ec;
    --color-primary-dark: #4c2bc8;
    --color-secondary: #a03ee8;
    --color-accent: #0f7aa6;
    --color-success: #087d5a;
    --color-success-light: #087d5a;
    --color-success-dark: #066346;
    --color-warning: #a75509;
    --color-warning-light: #884407;
    --color-danger: #c72b49;
    --color-danger-light: #a91f3a;
    --color-info: #0f6ea2;
    --color-on-primary: #ffffff;
    --theme-primary-rgb: 109, 74, 255;
    --theme-secondary-rgb: 160, 62, 232;
    --theme-foreground-rgb: 34, 27, 61;
    --theme-success-rgb: 8, 125, 90;
    --theme-warning-rgb: 167, 85, 9;
    --theme-danger-rgb: 199, 43, 73;
    --gradient-primary: linear-gradient(135deg, #6d4aff 0%, #a03ee8 100%);
    --shadow-sm: 0 1px 3px rgba(53, 37, 111, 0.08), 0 1px 2px rgba(53, 37, 111, 0.05);
    --shadow-md: 0 4px 16px rgba(53, 37, 111, 0.10);
    --shadow-lg: 0 12px 40px rgba(53, 37, 111, 0.12);
    --shadow-xl: 0 20px 60px rgba(53, 37, 111, 0.16);
    --shadow-card: 0 1px 3px rgba(53, 37, 111, 0.08), 0 0 0 1px rgba(109, 74, 255, 0.04);
    --shadow-card-hover: 0 12px 36px rgba(53, 37, 111, 0.13), 0 0 0 1px rgba(109, 74, 255, 0.16);
    --app-card-art-overlay: linear-gradient(90deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.30) 42%, transparent 78%);
    --app-card-art-opacity: .78;
    --app-card-art-filter: none;
    --app-card-art-blend-mode: normal;
}

/* 9. Sage Light */
html[data-theme="sage"], .theme-thumbnail[data-theme="sage"] {
    color-scheme: light;
    --color-bg-base: #fbfdf9;
    --color-bg-body: #f1f7ef;
    --color-bg-elevated: #e4f0e0;
    --color-bg-surface: #ffffff;
    --color-bg-subtle: #d3e5ce;
    --color-text-primary: #172d20;
    --color-text-secondary: #365242;
    --color-text-muted: #597061;
    --color-text-subtle: #697b6d;
    --color-primary: #1f7a4d;
    --color-primary-light: #17643e;
    --color-primary-dark: #125132;
    --color-secondary: #0c7c85;
    --color-accent: #3474a5;
    --color-success: #147548;
    --color-success-light: #147548;
    --color-success-dark: #0e5d39;
    --color-warning: #9a5a09;
    --color-warning-light: #794607;
    --color-danger: #bf3145;
    --color-danger-light: #9f2638;
    --color-info: #236998;
    --color-on-primary: #ffffff;
    --theme-primary-rgb: 31, 122, 77;
    --theme-secondary-rgb: 12, 124, 133;
    --theme-foreground-rgb: 23, 45, 32;
    --theme-success-rgb: 20, 117, 72;
    --theme-warning-rgb: 154, 90, 9;
    --theme-danger-rgb: 191, 49, 69;
    --gradient-primary: linear-gradient(135deg, #1f7a4d 0%, #0c7c85 100%);
    --shadow-sm: 0 1px 3px rgba(21, 64, 39, 0.08), 0 1px 2px rgba(21, 64, 39, 0.05);
    --shadow-md: 0 4px 16px rgba(21, 64, 39, 0.10);
    --shadow-lg: 0 12px 40px rgba(21, 64, 39, 0.12);
    --shadow-xl: 0 20px 60px rgba(21, 64, 39, 0.16);
    --shadow-card: 0 1px 3px rgba(21, 64, 39, 0.08), 0 0 0 1px rgba(31, 122, 77, 0.04);
    --shadow-card-hover: 0 12px 36px rgba(21, 64, 39, 0.13), 0 0 0 1px rgba(31, 122, 77, 0.16);
    --app-card-art-overlay: linear-gradient(90deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.30) 42%, transparent 78%);
    --app-card-art-opacity: .78;
    --app-card-art-filter: none;
    --app-card-art-blend-mode: normal;
}

/* 10. Sandstone Light */
html[data-theme="sandstone"], .theme-thumbnail[data-theme="sandstone"] {
    color-scheme: light;
    --color-bg-base: #fffdf8;
    --color-bg-body: #faf3e8;
    --color-bg-elevated: #f1e4d1;
    --color-bg-surface: #ffffff;
    --color-bg-subtle: #e5d1b5;
    --color-text-primary: #352416;
    --color-text-secondary: #5b4430;
    --color-text-muted: #7a624b;
    --color-text-subtle: #89725e;
    --color-primary: #a64916;
    --color-primary-light: #8b3b10;
    --color-primary-dark: #71300c;
    --color-secondary: #9a6a0c;
    --color-accent: #24738b;
    --color-success: #28764d;
    --color-success-light: #28764d;
    --color-success-dark: #1c5e3c;
    --color-warning: #9b5607;
    --color-warning-light: #7c4405;
    --color-danger: #bd3342;
    --color-danger-light: #9d2635;
    --color-info: #1d6c88;
    --color-on-primary: #ffffff;
    --theme-primary-rgb: 166, 73, 22;
    --theme-secondary-rgb: 154, 106, 12;
    --theme-foreground-rgb: 53, 36, 22;
    --theme-success-rgb: 40, 118, 77;
    --theme-warning-rgb: 155, 86, 7;
    --theme-danger-rgb: 189, 51, 66;
    --gradient-primary: linear-gradient(135deg, #a64916 0%, #9a6a0c 100%);
    --shadow-sm: 0 1px 3px rgba(84, 55, 28, 0.08), 0 1px 2px rgba(84, 55, 28, 0.05);
    --shadow-md: 0 4px 16px rgba(84, 55, 28, 0.10);
    --shadow-lg: 0 12px 40px rgba(84, 55, 28, 0.12);
    --shadow-xl: 0 20px 60px rgba(84, 55, 28, 0.16);
    --shadow-card: 0 1px 3px rgba(84, 55, 28, 0.08), 0 0 0 1px rgba(166, 73, 22, 0.04);
    --shadow-card-hover: 0 12px 36px rgba(84, 55, 28, 0.13), 0 0 0 1px rgba(166, 73, 22, 0.16);
    --app-card-art-overlay: linear-gradient(90deg, rgba(255, 255, 255, 0.77), rgba(255, 255, 255, 0.32) 42%, transparent 78%);
    --app-card-art-opacity: .78;
    --app-card-art-filter: none;
    --app-card-art-blend-mode: normal;
}

/* 11. Cloud Light */
html[data-theme="cloud"], .theme-thumbnail[data-theme="cloud"] {
    color-scheme: light;
    --color-bg-base: #fbfcfe;
    --color-bg-body: #f1f5f9;
    --color-bg-elevated: #e4eaf1;
    --color-bg-surface: #ffffff;
    --color-bg-subtle: #d5dde7;
    --color-text-primary: #17263a;
    --color-text-secondary: #3c5068;
    --color-text-muted: #607187;
    --color-text-subtle: #6f7f93;
    --color-primary: #2364a4;
    --color-primary-light: #1b528b;
    --color-primary-dark: #164372;
    --color-secondary: #5361b6;
    --color-accent: #0d7c83;
    --color-success: #16725b;
    --color-success-light: #16725b;
    --color-success-dark: #105b48;
    --color-warning: #9a5908;
    --color-warning-light: #7b4606;
    --color-danger: #bd3045;
    --color-danger-light: #9e2538;
    --color-info: #166b9b;
    --color-on-primary: #ffffff;
    --theme-primary-rgb: 35, 100, 164;
    --theme-secondary-rgb: 83, 97, 182;
    --theme-foreground-rgb: 23, 38, 58;
    --theme-success-rgb: 22, 114, 91;
    --theme-warning-rgb: 154, 89, 8;
    --theme-danger-rgb: 189, 48, 69;
    --gradient-primary: linear-gradient(135deg, #2364a4 0%, #5361b6 100%);
    --shadow-sm: 0 1px 3px rgba(31, 52, 76, 0.08), 0 1px 2px rgba(31, 52, 76, 0.05);
    --shadow-md: 0 4px 16px rgba(31, 52, 76, 0.10);
    --shadow-lg: 0 12px 40px rgba(31, 52, 76, 0.12);
    --shadow-xl: 0 20px 60px rgba(31, 52, 76, 0.16);
    --shadow-card: 0 1px 3px rgba(31, 52, 76, 0.08), 0 0 0 1px rgba(35, 100, 164, 0.04);
    --shadow-card-hover: 0 12px 36px rgba(31, 52, 76, 0.13), 0 0 0 1px rgba(35, 100, 164, 0.16);
    --app-card-art-overlay: linear-gradient(90deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.30) 42%, transparent 78%);
    --app-card-art-opacity: .78;
    --app-card-art-filter: none;
    --app-card-art-blend-mode: normal;
}

/* 12. Rose Quartz Light */
html[data-theme="rose"], .theme-thumbnail[data-theme="rose"] {
    --color-bg-base: #fffafb;
    --color-bg-body: #fff1f5;
    --color-bg-elevated: #f9dce7;
    --color-bg-surface: #ffffff;
    --color-bg-subtle: #efc5d5;
    --color-text-primary: #351724;
    --color-text-secondary: #603548;
    --color-text-muted: #815b6b;
    --color-text-subtle: #8d6978;
    --color-primary: #b4235a;
    --color-primary-light: #971c4a;
    --color-primary-dark: #7b163c;
    --color-secondary: #8f3f88;
    --color-accent: #0f7185;
    --color-on-primary: #ffffff;
    --theme-primary-rgb: 180, 35, 90;
    --theme-secondary-rgb: 143, 63, 136;
    --theme-foreground-rgb: 53, 23, 36;
    --gradient-primary: linear-gradient(135deg, #b4235a 0%, #8f3f88 100%);
}

/* 13. Lagoon Light */
html[data-theme="lagoon"], .theme-thumbnail[data-theme="lagoon"] {
    --color-bg-base: #f8feff;
    --color-bg-body: #eef9fa;
    --color-bg-elevated: #dff1f3;
    --color-bg-surface: #ffffff;
    --color-bg-subtle: #cae5e8;
    --color-text-primary: #102d32;
    --color-text-secondary: #31545a;
    --color-text-muted: #57747a;
    --color-text-subtle: #668187;
    --color-primary: #0f6f78;
    --color-primary-light: #0b5d65;
    --color-primary-dark: #084b52;
    --color-secondary: #2563a6;
    --color-accent: #8a4c12;
    --color-on-primary: #ffffff;
    --theme-primary-rgb: 15, 111, 120;
    --theme-secondary-rgb: 37, 99, 166;
    --theme-foreground-rgb: 16, 45, 50;
    --gradient-primary: linear-gradient(135deg, #0f6f78 0%, #2563a6 100%);
}

/* 14. Citrus Light */
html[data-theme="citrus"], .theme-thumbnail[data-theme="citrus"] {
    --color-bg-base: #fffdf5;
    --color-bg-body: #fff8df;
    --color-bg-elevated: #f6edc5;
    --color-bg-surface: #ffffff;
    --color-bg-subtle: #eadca7;
    --color-text-primary: #302812;
    --color-text-secondary: #564a28;
    --color-text-muted: #766a47;
    --color-text-subtle: #837756;
    --color-primary: #8c5d00;
    --color-primary-light: #744c00;
    --color-primary-dark: #5c3c00;
    --color-secondary: #557116;
    --color-accent: #166b83;
    --color-on-primary: #ffffff;
    --theme-primary-rgb: 140, 93, 0;
    --theme-secondary-rgb: 85, 113, 22;
    --theme-foreground-rgb: 48, 40, 18;
    --gradient-primary: linear-gradient(135deg, #8c5d00 0%, #557116 100%);
}

/* 15. Iris Light */
html[data-theme="iris"], .theme-thumbnail[data-theme="iris"] {
    --color-bg-base: #fdfbff;
    --color-bg-body: #f7f2ff;
    --color-bg-elevated: #eee5fb;
    --color-bg-surface: #ffffff;
    --color-bg-subtle: #dfd1f2;
    --color-text-primary: #241b3c;
    --color-text-secondary: #493d67;
    --color-text-muted: #6b6087;
    --color-text-subtle: #786d93;
    --color-primary: #5644bd;
    --color-primary-light: #4838a2;
    --color-primary-dark: #3a2d84;
    --color-secondary: #9a387c;
    --color-accent: #0d7480;
    --color-on-primary: #ffffff;
    --theme-primary-rgb: 86, 68, 189;
    --theme-secondary-rgb: 154, 56, 124;
    --theme-foreground-rgb: 36, 27, 60;
    --gradient-primary: linear-gradient(135deg, #5644bd 0%, #9a387c 100%);
}

/* 16. Coral Light */
html[data-theme="coral"], .theme-thumbnail[data-theme="coral"] {
    --color-bg-base: #fffbf8;
    --color-bg-body: #fff3eb;
    --color-bg-elevated: #f8e2d3;
    --color-bg-surface: #ffffff;
    --color-bg-subtle: #edd0bd;
    --color-text-primary: #362018;
    --color-text-secondary: #5e4237;
    --color-text-muted: #7e6257;
    --color-text-subtle: #8a6f64;
    --color-primary: #b33a26;
    --color-primary-light: #96301f;
    --color-primary-dark: #792619;
    --color-secondary: #9b4e21;
    --color-accent: #176d7d;
    --color-on-primary: #ffffff;
    --theme-primary-rgb: 179, 58, 38;
    --theme-secondary-rgb: 155, 78, 33;
    --theme-foreground-rgb: 54, 32, 24;
    --gradient-primary: linear-gradient(135deg, #b33a26 0%, #9b4e21 100%);
}

/* 17. Monochrom Minimalist */
[data-theme="monochrom"] {
    --color-bg-base: #070707;
    --color-bg-body: #0d0d0e;
    --color-bg-elevated: #151516;
    --color-bg-surface: #1d1d1f;
    --color-bg-subtle: #2a2a2d;
    --color-text-primary: #fafafa;
    --color-text-secondary: #d4d4d4;
    --color-text-muted: #a3a3a3;
    --color-text-subtle: #858585;
    --color-primary: #e5e7eb;
    --color-primary-light: #f5f5f5;
    --color-primary-dark: #bdbdbd;
    --color-secondary: #a3a3a3;
    --color-accent: #d4d4d4;
    --color-on-primary: #111111;
    --theme-primary-rgb: 229, 231, 235;
    --theme-secondary-rgb: 163, 163, 163;
    --theme-foreground-rgb: 250, 250, 250;
    --gradient-primary: linear-gradient(135deg, #f5f5f5 0%, #a3a3a3 100%);
}

/* 18. Gold & Royal */
[data-theme="royal"] {
    --color-bg-base: #070d18;
    --color-bg-body: #091220;
    --color-bg-elevated: #101d30;
    --color-bg-surface: #172944;
    --color-bg-subtle: #213958;
    --color-text-primary: #fffdf5;
    --color-text-secondary: #e6dfc8;
    --color-text-muted: #ada58d;
    --color-text-subtle: #a69d84;
    --color-primary: #eab308;
    --color-primary-light: #facc15;
    --color-primary-dark: #ca8a04;
    --color-secondary: #38bdf8;
    --color-accent: #fcd34d;
    --color-on-primary: #241a01;
    --theme-primary-rgb: 234, 179, 8;
    --theme-secondary-rgb: 56, 189, 248;
    --theme-foreground-rgb: 255, 253, 245;
    --gradient-primary: linear-gradient(135deg, #eab308 0%, #b45309 100%);
}

/* 19. Material Horizon */
[data-theme="material"] {
    --color-bg-base: #0c0913;
    --color-bg-body: #110d1c;
    --color-bg-elevated: #191326;
    --color-bg-surface: #241a35;
    --color-bg-subtle: #33234b;
    --color-text-primary: #faf7ff;
    --color-text-secondary: #ded4eb;
    --color-text-muted: #aa98be;
    --color-text-subtle: #927daa;
    --color-primary: #7c3aed;
    --color-primary-light: #a78bfa;
    --color-primary-dark: #6d28d9;
    --color-secondary: #ec4899;
    --color-accent: #c4b5fd;
    --color-on-primary: #ffffff;
    --theme-primary-rgb: 124, 58, 237;
    --theme-secondary-rgb: 236, 72, 153;
    --theme-foreground-rgb: 250, 247, 255;
    --gradient-primary: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
}

/*
   COMPONENT COLOR BRIDGE
   Older dashboard components used translucent white/indigo literals. These
   overrides route the visible interaction states through semantic tokens.
*/

body {
    accent-color: var(--color-primary);
}

.app-header {
    background: color-mix(in srgb, var(--color-bg-body) 82%, transparent);
    border-color: var(--border-color);
}

.sidebar,
.modal-content,
.column-selector-dropdown,
.toast-item {
    border-color: var(--border-color-light);
}

.btn-primary,
.sidebar-brand-icon,
.sidebar-user-avatar,
.page-title-icon,
.app-avatar {
    color: var(--color-on-primary);
}

.btn-outline-primary {
    color: var(--color-primary-light);
    border-color: color-mix(in srgb, var(--color-primary) 48%, transparent);
}

.btn-outline-primary:hover {
    color: var(--color-on-primary);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.sidebar-user:hover,
.sidebar-toggle-btn:hover,
.mobile-menu-btn:hover,
.nav-link:hover,
.column-selector-item:hover,
.app-metric,
.app-detail-stat,
.app-platform,
.app-card-action,
.app-product-link-card,
.app-product-information-count {
    background: var(--color-bg-hover);
}

.nav-link.active,
.theme-option.is-selected {
    background: var(--color-bg-primary-soft);
}

.nav-link.active::before {
    background: var(--color-primary);
}

.theme-option {
    padding: 0.7rem 0.85rem;
    color: var(--color-text-secondary);
    background: var(--color-bg-hover);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.theme-option:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover-strong);
    border-color: color-mix(in srgb, var(--color-primary) 42%, var(--border-color-light));
    transform: translateY(-1px);
}

.theme-option.is-selected {
    color: var(--color-text-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}

.theme-option-swatch {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 2px solid var(--border-color-light);
    border-radius: 50%;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-bg-base) 65%, transparent);
}

.apps-summary-card.primary {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-bg-elevated) 84%, var(--color-success) 16%),
        color-mix(in srgb, var(--color-bg-surface) 94%, var(--color-primary) 6%));
    border-color: color-mix(in srgb, var(--color-success) 28%, var(--border-color-light));
}

.apps-summary-icon,
.app-icon-fallback,
.app-product-panel-icon,
.app-product-link-icon,
.catalog-onboarding-icon {
    color: var(--color-primary-light);
    background: var(--color-bg-primary-soft) !important;
}

.apps-summary-card.primary .apps-summary-icon,
.app-detail-stat.highlight,
.app-metric.highlight,
.app-capability.ready,
.portfolio-status.active {
    background: var(--color-bg-success-soft);
}

.app-detail-stat.highlight {
    border-color: color-mix(in srgb, var(--color-success) 24%, transparent);
}

.portfolio-status.development,
.activity-icon,
.feed-item.info .feed-icon,
.insight-card.info .insight-icon {
    background: var(--color-bg-primary-soft);
}

.portfolio-status.legacy,
.app-capability.pending,
.app-card-note,
.feed-item.warning .feed-icon,
.insight-card.warning .insight-icon {
    background: var(--color-bg-warning-soft);
}

.app-card-note {
    border-color: color-mix(in srgb, var(--color-warning) 22%, transparent);
}

.feed-item.danger .feed-icon,
.insight-card.danger .insight-icon {
    background: var(--color-bg-danger-soft);
}

.app-product-description-panel,
.app-product-links-panel,
.app-product-facts-panel {
    background: color-mix(in srgb, var(--color-bg-base) 55%, transparent);
}

.catalog-onboarding-panel {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary) 9%, transparent),
        var(--color-bg-hover));
    border-color: color-mix(in srgb, var(--color-primary) 38%, transparent);
}

input,
select,
textarea,
.form-control,
.form-select {
    color: var(--color-text-primary);
    background-color: var(--color-bg-control);
    border-color: var(--border-color-light);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-subtle);
    opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    color: var(--color-text-primary);
    background-color: var(--color-bg-control);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.16);
}

/* Light themes use the same neutral surface for every platform badge. */
html:is(
    [data-theme="polaris"],
    [data-theme="aurora"],
    [data-theme="sage"],
    [data-theme="sandstone"],
    [data-theme="cloud"],
    [data-theme="rose"],
    [data-theme="lagoon"],
    [data-theme="citrus"],
    [data-theme="iris"],
    [data-theme="coral"]
) .app-header {
    background: color-mix(in srgb, var(--color-bg-body) 88%, transparent);
}

html:is(
    [data-theme="polaris"],
    [data-theme="aurora"],
    [data-theme="sage"],
    [data-theme="sandstone"],
    [data-theme="cloud"],
    [data-theme="rose"],
    [data-theme="lagoon"],
    [data-theme="citrus"],
    [data-theme="iris"],
    [data-theme="coral"]
) .app-platform {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

html:is(
    [data-theme="polaris"],
    [data-theme="aurora"],
    [data-theme="sage"],
    [data-theme="sandstone"],
    [data-theme="cloud"],
    [data-theme="rose"],
    [data-theme="lagoon"],
    [data-theme="citrus"],
    [data-theme="iris"],
    [data-theme="coral"]
) .app-platform.platform-apple {
    color: #334155;
}

html:is(
    [data-theme="polaris"],
    [data-theme="aurora"],
    [data-theme="sage"],
    [data-theme="sandstone"],
    [data-theme="cloud"],
    [data-theme="rose"],
    [data-theme="lagoon"],
    [data-theme="citrus"],
    [data-theme="iris"],
    [data-theme="coral"]
) :is(.modal-backdrop, .sidebar-overlay, .filter-bar-overlay) {
    background: rgba(15, 23, 42, 0.32);
}

html:is(
    [data-theme="polaris"],
    [data-theme="aurora"],
    [data-theme="sage"],
    [data-theme="sandstone"],
    [data-theme="cloud"],
    [data-theme="rose"],
    [data-theme="lagoon"],
    [data-theme="citrus"],
    [data-theme="iris"],
    [data-theme="coral"]
) .tooltip-content,
html:is(
    [data-theme="polaris"],
    [data-theme="aurora"],
    [data-theme="sage"],
    [data-theme="sandstone"],
    [data-theme="cloud"],
    [data-theme="rose"],
    [data-theme="lagoon"],
    [data-theme="citrus"],
    [data-theme="iris"],
    [data-theme="coral"]
) [data-tooltip]::after {
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.96);
}

/*
   LAYOUTS
*/

/* 1. Classic Full-Height is the default. */

/* 2. Unified Top Navbar (SaaS style) */
[data-layout="topnav"] .sidebar {
    display: none !important;
}

[data-layout="topnav"] .main-content {
    margin-left: 0 !important;
}

[data-layout="topnav"] .app-header-left .sidebar-toggle-btn {
    display: none !important;
}

/* 3. Floating Island Sidebar */
[data-layout="floating"] .sidebar {
    height: calc(100vh - 40px);
    margin: 20px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--border-color-light);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
}

[data-layout="floating"] .main-content {
    margin-left: 300px;
}

[data-layout="floating"] .app-header {
    width: calc(100% - 40px);
    margin: 0 20px 20px;
    border-radius: 0 0 20px 20px;
}

[data-layout="floating"] .content {
    padding: 20px;
}

@media (max-width: 992px) {
    [data-layout="floating"] .main-content {
        margin-left: 0;
    }
}

/* 4. Framed Window Layout (macOS style) */
[data-layout="framed"] {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-base);
}

[data-layout="framed"] .page {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 2vw auto;
    overflow: hidden;
    border: 1px solid var(--border-color-light);
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
}

[data-layout="framed"] .sidebar {
    position: absolute;
}

[data-layout="framed"] .app-header {
    width: 100%;
}