/* ============================================
                     Dark MODE
   ============================================ */
[data-theme="dark"] {
    /* Base colors */
    --base-color: #000000;
    --text-color: #ffffff;
    --text-span: rgba(198, 238, 238, 0.603);

    /* UI elements */
    --body-grid-line: rgba(255, 255, 255, 0.085);
    --focus-ring-color: #ffffff;

    /* Button colors - DARK theme (dark buttons on dark bg) */
    --btn-cell-bg: #ffffff;
    --btn-cell-gradient-start: #d6e0e2;
    --btn-cell-gradient-end: #ffffff;

    /* Warning/alert colors */
    --clr-warn-1: #2a1f14;
    --clr-warn-2: #6b5646;
    --clr-warn-text: #e8dcc8;

    /* Effects */
    --shadow-color-primary: rgba(255, 255, 255, 0.8);
    --shadow-color-secondary: rgba(255, 255, 255, 0.7);
    --shadow-color-tertiary: rgba(255, 255, 255, 0.5);

    --gradient-header: linear-gradient(90deg,
            rgba(235, 235, 243, 0.431),
            rgba(118, 166, 200, 0),
            rgba(80, 146, 163, 0.2),
            rgb(52, 102, 108));

    --gradient: linear-gradient(90deg,
            var(--text-span),
            var(--text-color),
            var(--text-span));

    --backdrop-blur: blur(12px);
    --navbar-shadow: 0 4px 12px rgba(247, 238, 238, 0.35);

    /* Blend modes */
    --blend-mode: lighten;
}

/* ============================================
   LIGHT MODE - IMPROVED READABILITY
   ============================================ */
[data-theme="light"] {
    /* Base colors - warm, comfortable */
    --base-color: #f5f5f5;
    /* Warm off-white (paper-like) */
    --text-color: #1a1a1a;
    /* Very dark gray (not pure black) */
    --text-span: rgb(35, 110, 140);
    /* Darker, readable blue */

    --body-grid-line: rgba(0, 0, 0, 0.2);
    --focus-ring-color: #2a2a2a;

    --btn-cell-bg: #0a0a0a;
    --btn-cell-gradient-start: #1a1a1a;
    --btn-cell-gradient-end: #0a0a0a;

    --clr-warn-1: #f0ebe6;
    --clr-warn-2: #8a7a6d;
    --clr-warn-text: #3a2d25;

    --shadow-color-primary: rgb(30, 30, 30);
    --shadow-color-secondary: rgba(0, 0, 0, 0.8);
    --shadow-color-tertiary: rgba(0, 0, 0, 0.6);

    --gradient-header: linear-gradient(90deg,
            rgba(200, 205, 215, 0.5),
            rgba(70, 130, 180, 0.4),
            rgba(60, 120, 140, 0.3),
            rgb(40, 85, 95));

    --gradient: linear-gradient(90deg,
            var(--text-span),
            var(--text-color),
            var(--text-span));

    --backdrop-blur: blur(12px);
    --navbar-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

    --blend-mode: darken;
}

/* Modern browsers - OKLCH */
@supports (color: oklch(0% 0 0deg)) {
    [data-theme="light"] {
        --base-color: oklch(97% 0.005 60deg);
        /* Warm off-white */
        --text-color: oklch(15% 0 0deg);
        /* Very dark gray */
        --text-span: oklch(50% 0.09 210deg);
        /* Darker blue */
        --nav-contrast-color: oklch(100% 0.00011 271.152deg);

        --focus-ring-color: oklch(20% 0.015 271.152deg);
        --body-grid-line: oklch(20% 0.015 271.152deg / 0.2);

        --btn-cell-bg: oklch(5% 0 0deg);
        --btn-cell-gradient-start: oklch(10% 0 0deg);
        --btn-cell-gradient-end: oklch(5% 0 0deg);

        --clr-warn-1: oklch(93% 0.01 60deg);
        --clr-warn-2: oklch(55% 0.025 30deg);
        --clr-warn-text: oklch(25% 0.025 30deg);

        --shadow-color-primary: oklch(25% 0 0deg);
        --shadow-color-secondary: oklch(0% 0 0deg / 0.8);
        --shadow-color-tertiary: oklch(0% 0 0deg / 0.6);
    }
}

/* Enhanced text visibility */
[data-theme="light"] body {
    font-weight: 500;
    color: #1a1a1a;
    /* Very dark gray */
    background-color: #f8f6f3;
    /* Warm off-white */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Specific elements - even more pronounced */
[data-theme="light"] .header-text,
[data-theme="light"] .header-break,
[data-theme="light"] .header-text,
[data-theme="light"] .site-title,
[data-theme="light"] .site-title-break,
[data-theme="light"] .curve-container,
[data-theme="light"] .button-text,
[data-theme="light"] .footer-text,
[data-theme="light"] .footer-break,
[data-theme="light"] .footer-break-1,
[data-theme="light"] .theme-switcher svg {
    color: #080808;
    font-weight: 400;
    /* Bold for elements */
}

/* Update theme switcher reference */
[data-theme="light"] .theme-switcher .theme-button svg {
    fill: currentColor;
}