/* ==========================================================
   Kartt V2 — Theme System (Light + Dark)
   Uses CSS custom properties with space-separated RGB values
   so Tailwind opacity modifiers (e.g., bg-primary/20) work.
   ========================================================== */

/* ---------- LIGHT THEME (default) ---------- */
:root {
    --color-primary: 0 110 42;
    --color-on-primary: 255 255 255;
    --color-primary-container: 154 248 160;
    --color-on-primary-container: 0 33 8;
    --color-primary-fixed: 105 255 135;
    --color-primary-fixed-dim: 60 227 106;
    --color-on-primary-fixed: 0 33 8;
    --color-on-primary-fixed-variant: 0 83 30;
    --color-inverse-primary: 60 227 106;

    --color-secondary: 81 99 80;
    --color-on-secondary: 255 255 255;
    --color-secondary-container: 212 232 208;
    --color-on-secondary-container: 15 31 16;
    --color-secondary-fixed: 170 244 173;
    --color-secondary-fixed-dim: 142 215 147;
    --color-on-secondary-fixed: 0 33 8;
    --color-on-secondary-fixed-variant: 2 83 30;

    --color-tertiary: 156 64 64;
    --color-on-tertiary: 255 255 255;
    --color-tertiary-container: 255 218 214;
    --color-on-tertiary-container: 65 0 2;
    --color-tertiary-fixed: 255 218 214;
    --color-tertiary-fixed-dim: 255 180 171;
    --color-on-tertiary-fixed: 65 0 2;
    --color-on-tertiary-fixed-variant: 126 42 36;

    --color-error: 186 26 26;
    --color-on-error: 255 255 255;
    --color-error-container: 255 218 214;
    --color-on-error-container: 65 0 2;

    --color-surface: 248 250 244;
    --color-on-surface: 26 28 25;
    --color-surface-variant: 222 229 217;
    --color-on-surface-variant: 66 73 64;
    --color-surface-dim: 216 219 211;
    --color-surface-bright: 248 250 244;
    --color-surface-container-lowest: 255 255 255;
    --color-surface-container-low: 242 244 238;
    --color-surface-container: 236 239 233;
    --color-surface-container-high: 230 233 227;
    --color-surface-container-highest: 225 227 221;
    --color-surface-tint: 0 110 42;

    --color-background: 248 250 244;
    --color-on-background: 26 28 25;
    --color-outline: 114 121 111;
    --color-outline-variant: 193 201 190;
    --color-inverse-surface: 47 49 44;
    --color-inverse-on-surface: 239 241 235;
}

/* ---------- DARK THEME ---------- */
.dark {
    --color-primary: 63 229 108;
    --color-on-primary: 0 57 18;
    --color-primary-container: 0 200 83;
    --color-on-primary-container: 0 76 27;
    --color-primary-fixed: 105 255 135;
    --color-primary-fixed-dim: 60 227 106;
    --color-on-primary-fixed: 0 33 8;
    --color-on-primary-fixed-variant: 0 83 30;
    --color-inverse-primary: 0 110 42;

    --color-secondary: 142 215 147;
    --color-on-secondary: 0 57 18;
    --color-secondary-container: 2 83 30;
    --color-on-secondary-container: 126 197 131;
    --color-secondary-fixed: 170 244 173;
    --color-secondary-fixed-dim: 142 215 147;
    --color-on-secondary-fixed: 0 33 8;
    --color-on-secondary-fixed-variant: 2 83 30;

    --color-tertiary: 255 183 174;
    --color-on-tertiary: 96 20 16;
    --color-tertiary-container: 255 141 129;
    --color-on-tertiary-container: 118 37 31;
    --color-tertiary-fixed: 255 218 214;
    --color-tertiary-fixed-dim: 255 180 171;
    --color-on-tertiary-fixed: 65 0 2;
    --color-on-tertiary-fixed-variant: 126 42 36;

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

    --color-surface: 16 20 26;
    --color-on-surface: 223 226 235;
    --color-surface-variant: 49 53 60;
    --color-on-surface-variant: 187 203 184;
    --color-surface-dim: 16 20 26;
    --color-surface-bright: 53 57 64;
    --color-surface-container-lowest: 10 14 20;
    --color-surface-container-low: 24 28 34;
    --color-surface-container: 28 32 38;
    --color-surface-container-high: 38 42 49;
    --color-surface-container-highest: 49 53 60;
    --color-surface-tint: 60 227 106;

    --color-background: 16 20 26;
    --color-on-background: 223 226 235;
    --color-outline: 134 149 131;
    --color-outline-variant: 60 74 60;
    --color-inverse-surface: 223 226 235;
    --color-inverse-on-surface: 45 49 55;
}

/* ---------- ICON FONT (Material Symbols) ---------- */
/* Full helper rule. Tailwind text-* utilities still override font-size.
   Lives here so every page gets it (previously only font-variation-settings
   was set inline, so the icon font never applied under the CLI build). */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---------- SHARED UTILITIES ---------- */
.glass-panel {
    background: rgb(var(--color-surface-container) / 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.neon-glow {
    box-shadow: 0 0 15px rgb(var(--color-primary) / 0.2);
}
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }