/*
 * FluxCMS — Theme System
 * 3 themes: Dark Grey (default), Dark Neon, Light Professional
 * Colors defined as space-separated RGB for Tailwind opacity modifier support
 * Usage in Tailwind: rgb(var(--md-surface-container)) or bg-surface-container/50
 */

/* ══════════════════════════════════════════════════════════════
   DARK GREY — Default theme (identical to current colors)
   ══════════════════════════════════════════════════════════════ */
:root[data-theme="dark-grey"],
:root:not([data-theme]) {
    /* Material Design 3 tokens */
    --md-primary: 255 180 169;
    --md-primary-container: 250 90 72;
    --md-primary-fixed: 255 218 213;
    --md-primary-fixed-dim: 255 180 169;
    --md-on-primary: 105 0 1;
    --md-on-primary-container: 92 0 1;
    --md-on-primary-fixed: 65 0 0;
    --md-on-primary-fixed-variant: 145 8 7;
    --md-inverse-primary: 180 39 29;

    --md-secondary: 174 236 255;
    --md-secondary-container: 0 217 255;
    --md-secondary-fixed: 174 236 255;
    --md-secondary-fixed-dim: 0 217 255;
    --md-on-secondary: 0 54 65;
    --md-on-secondary-container: 0 91 108;
    --md-on-secondary-fixed: 0 31 38;
    --md-on-secondary-fixed-variant: 0 78 93;

    --md-tertiary: 0 228 121;
    --md-tertiary-container: 0 166 87;
    --md-tertiary-fixed: 96 255 153;
    --md-tertiary-fixed-dim: 0 228 121;
    --md-on-tertiary: 0 57 25;
    --md-on-tertiary-container: 0 49 21;
    --md-on-tertiary-fixed: 0 33 12;
    --md-on-tertiary-fixed-variant: 0 82 40;

    --md-error: 255 180 171;
    --md-error-container: 147 0 10;
    --md-on-error: 105 0 5;
    --md-on-error-container: 255 218 214;

    --md-surface: 15 20 25;
    --md-surface-dim: 15 20 25;
    --md-surface-bright: 53 58 63;
    --md-surface-container: 27 32 37;
    --md-surface-container-low: 23 28 33;
    --md-surface-container-high: 37 42 48;
    --md-surface-container-highest: 48 53 59;
    --md-surface-container-lowest: 10 15 20;
    --md-surface-variant: 48 53 59;
    --md-surface-tint: 255 180 169;
    --md-on-surface: 222 227 234;
    --md-on-surface-variant: 226 190 185;
    --md-inverse-surface: 222 227 234;
    --md-inverse-on-surface: 44 49 55;

    --md-outline: 139 148 158;
    --md-outline-variant: 61 68 77;
    --md-background: 15 20 25;
    --md-on-background: 222 227 234;

    /* Semantic status colors */
    --status-danger: 231 76 60;
    --status-danger-high: 255 107 107;
    --status-success: 0 255 136;
    --status-info: 0 217 255;
    --status-warning: 255 170 0;

    /* Navigation */
    --nav-bg: 37 42 49;
    --nav-text: 160 168 176;
    --nav-text-hover: 222 227 234;
    --nav-active-border: 231 76 60;
}

/* ══════════════════════════════════════════════════════════════
   DARK NEON — Darker background, vibrant neon accents
   ══════════════════════════════════════════════════════════════ */
:root[data-theme="dark-neon"] {
    --md-primary: 0 255 136;
    --md-primary-container: 0 204 102;
    --md-primary-fixed: 150 255 200;
    --md-primary-fixed-dim: 0 255 136;
    --md-on-primary: 0 51 24;
    --md-on-primary-container: 0 40 18;
    --md-on-primary-fixed: 0 33 12;
    --md-on-primary-fixed-variant: 0 82 40;
    --md-inverse-primary: 0 170 85;

    --md-secondary: 0 255 255;
    --md-secondary-container: 0 221 255;
    --md-secondary-fixed: 150 240 255;
    --md-secondary-fixed-dim: 0 221 255;
    --md-on-secondary: 0 40 50;
    --md-on-secondary-container: 0 70 90;
    --md-on-secondary-fixed: 0 25 30;
    --md-on-secondary-fixed-variant: 0 60 75;

    --md-tertiary: 255 0 255;
    --md-tertiary-container: 180 0 180;
    --md-tertiary-fixed: 255 150 255;
    --md-tertiary-fixed-dim: 255 0 255;
    --md-on-tertiary: 50 0 50;
    --md-on-tertiary-container: 40 0 40;
    --md-on-tertiary-fixed: 30 0 30;
    --md-on-tertiary-fixed-variant: 70 0 70;

    --md-error: 255 100 100;
    --md-error-container: 160 0 10;
    --md-on-error: 80 0 5;
    --md-on-error-container: 255 200 200;

    --md-surface: 8 12 16;
    --md-surface-dim: 8 12 16;
    --md-surface-bright: 40 48 56;
    --md-surface-container: 16 21 32;
    --md-surface-container-low: 12 16 24;
    --md-surface-container-high: 22 29 40;
    --md-surface-container-highest: 30 37 48;
    --md-surface-container-lowest: 5 8 16;
    --md-surface-variant: 26 32 48;
    --md-surface-tint: 0 255 136;
    --md-on-surface: 224 240 255;
    --md-on-surface-variant: 160 255 204;
    --md-inverse-surface: 224 240 255;
    --md-inverse-on-surface: 10 16 32;

    --md-outline: 74 96 128;
    --md-outline-variant: 26 40 56;
    --md-background: 8 12 16;
    --md-on-background: 224 240 255;

    --status-danger: 255 68 68;
    --status-danger-high: 255 100 100;
    --status-success: 0 255 136;
    --status-info: 0 255 255;
    --status-warning: 255 204 0;

    --nav-bg: 13 17 23;
    --nav-text: 136 153 170;
    --nav-text-hover: 224 240 255;
    --nav-active-border: 0 255 136;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT PROFESSIONAL — Clean light background
   ══════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
    --md-primary: 37 99 235;
    --md-primary-container: 59 130 246;
    --md-primary-fixed: 219 234 254;
    --md-primary-fixed-dim: 147 197 253;
    --md-on-primary: 255 255 255;
    --md-on-primary-container: 255 255 255;
    --md-on-primary-fixed: 30 58 138;
    --md-on-primary-fixed-variant: 29 78 216;
    --md-inverse-primary: 147 197 253;

    --md-secondary: 14 165 233;
    --md-secondary-container: 2 132 199;
    --md-secondary-fixed: 224 242 254;
    --md-secondary-fixed-dim: 56 189 248;
    --md-on-secondary: 255 255 255;
    --md-on-secondary-container: 255 255 255;
    --md-on-secondary-fixed: 7 89 133;
    --md-on-secondary-fixed-variant: 3 105 161;

    --md-tertiary: 139 92 246;
    --md-tertiary-container: 109 40 217;
    --md-tertiary-fixed: 237 233 254;
    --md-tertiary-fixed-dim: 167 139 250;
    --md-on-tertiary: 255 255 255;
    --md-on-tertiary-container: 255 255 255;
    --md-on-tertiary-fixed: 76 29 149;
    --md-on-tertiary-fixed-variant: 91 33 182;

    --md-error: 220 38 38;
    --md-error-container: 254 226 226;
    --md-on-error: 255 255 255;
    --md-on-error-container: 153 27 27;

    --md-surface: 248 248 250;
    --md-surface-dim: 221 221 224;
    --md-surface-bright: 248 248 250;
    --md-surface-container: 236 236 240;
    --md-surface-container-low: 242 242 245;
    --md-surface-container-high: 228 228 232;
    --md-surface-container-highest: 220 220 224;
    --md-surface-container-lowest: 255 255 255;
    --md-surface-variant: 224 224 228;
    --md-surface-tint: 37 99 235;
    --md-on-surface: 26 26 46;
    --md-on-surface-variant: 74 74 94;
    --md-inverse-surface: 26 26 46;
    --md-inverse-on-surface: 240 240 245;

    --md-outline: 116 116 138;
    --md-outline-variant: 196 196 208;
    --md-background: 248 248 250;
    --md-on-background: 26 26 46;

    --status-danger: 220 38 38;
    --status-danger-high: 239 68 68;
    --status-success: 22 163 74;
    --status-info: 37 99 235;
    --status-warning: 217 119 6;

    --nav-bg: 255 255 255;
    --nav-text: 107 114 128;
    --nav-text-hover: 17 24 39;
    --nav-active-border: 37 99 235;
}