/* Dark theme (default) */
html[data-theme="dark"] {
    --bg-1: #1e1e1e;  /* primary background */
    --bg-2: #2a2a2a;  /* secondary surfaces / cards */
    --bg-3: #323232;  /* subtle borders / dividers */
    --bg-4: #3c3c3c;  /* slightly lighter for hover or highlights */
  
    /* Foreground / UI elements */
    --fg-1: #c2c0bc;  /* icons, secondary text, subtle UI elements */
    --fg-2: #969695;  /* icons, secondary text, subtle UI elements */
  
    /* Main text */
    --text-1: #e0e0e0; /* readable on dark bg */

    --water: #087976;

    --primary: #4f7cff;
    --secondary: #29c18c;
    --accent: #ffd166;
    --danger: #ff6b6b;
    --bg-dark: #0f1419;
    --bg-light: #1a1f2e;
    --card-bg: #252b3a;
    --text-primary: #ffffff;
    --text-secondary: #a8b2d1;
    --border: rgba(79, 124, 255, 0.1);
    color-scheme: dark;
}

/* Light theme */
html[data-theme="light"] {
    --bg-1: #ebebeb;
    --bg-2: #f2f2f2;
    --bg-3: #e1dfde;
    --bg-4: #bfbebe;

    --fg-1: #bcbab9;
    --fg-2: #a49f9b;

    --text-1: #444443;

    --water: #34ebe5;

    --primary: #2b5cff;
    --secondary: #15a874;
    --accent: #ffa500;
    --danger: #d83b3b;
    --bg-dark: #f6f7fb;
    --bg-light: #ffffff;
    --card-bg: #f0f2f8;
    --text-primary: #1b1e26;
    --text-secondary: #4f5561;
    --border: rgba(43, 92, 255, 0.1);
    color-scheme: light;
}