/* ========== COLOR VARIABLES ========== */

/* ========== LIGHT THEME ========== */
:root, .light {
    /* Backgrounds / surfaces */
    --color-bg: #f9fafb; /* gray-50 */
    --color-surface: #ffffff; /* white */
    --color-border: #e5e7eb; /* gray-200 */
    --color-muted: #f3f4f6; /* gray-100 */

    /* Text */
    --color-text: #1f2937; /* gray-800 */
    --color-text-muted: #6b7280; /* gray-500 */
    --color-text-inverse: #ffffff;

    /* Accent / Primary */
    --color-accent: #2563eb; /* blue-600 */
    --color-accent-hover: #1d4ed8; /* blue-700 */
    --color-accent-muted: #93c5fd; /* blue-300 */

    /* Shadows (for subtle elevation) */
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ========== DARK THEME ========== */
.dark {
    --color-bg: #1e293b; /* slate-800 */
    --color-surface: #273449; /* slate-700 */
    --color-border: #334155; /* slate-600 */
    --color-muted: #3b4252; /* dark muted background */

    --color-text: #e2e8f0; /* gray-200 */
    --color-text-muted: #94a3b8; /* gray-400 */
    --color-text-inverse: #000000;

    --color-accent: #3b82f6; /* blue-500 */
    --color-accent-hover: #60a5fa; /* blue-400 */
    --color-accent-muted: #1d4ed8; /* blue-700 */

    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ========== BLACK (OLED) THEME ========== */
.black {
    --color-bg: #000000;
    --color-surface: #0a0a0a;
    --color-border: #1f1f1f;
    --color-muted: #121212;

    --color-text: #f5f5f5;
    --color-text-muted: #9ca3af;
    --color-text-inverse: #000000;

    --color-accent: #3b82f6; /* same blue accent for now */
    --color-accent-hover: #60a5fa;
    --color-accent-muted: #1e40af;

    --shadow: none; /* pure black mode prefers flat visuals */
}

/* ========== GRAY THEME ========== */
.gray {
    --color-bg: #181818; /* main background */
    --color-surface: #222222; /* slightly lighter surface */
    --color-muted: #2a2a2a; /* muted bg areas */
    --color-border: #3a3a3a; /* low contrast border */

    --color-text: #eaeaea; /* off white text */
    --color-text-muted: #a3a3a3; /* medium gray */
    --color-text-inverse: #000000;

    --color-accent: #3b82f6; /* blue-500 */
    --color-accent-hover: #60a5fa; /* blue-400 */
    --color-accent-muted: #1d4ed8; /* blue-700 */

    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}