/* =========================================
   ONWAVE CONNECT DARK MODE TOKENS
   ========================================= */

[data-theme="dark"] {
    /* -----------------------------------------
       NEUTRAL PALETTE (Dark Mode)
       Inverted gray scale
       ----------------------------------------- */
    --onwave-neutral-25: #151B23;
    --onwave-neutral-50: #1D2430;
    --onwave-neutral-100: #262C36;
    --onwave-neutral-200: #2A313C;
    --onwave-neutral-300: #3D444D;
    --onwave-neutral-400: #656C76;
    --onwave-neutral-500: #818B98;
    --onwave-neutral-600: #9198A1;
    --onwave-neutral-700: #B7BDC8;
    --onwave-neutral-800: #E0E0E0;
    --onwave-neutral-900: #F0F6FC;

    /* -----------------------------------------
       SIDEBAR & NAVIGATION
       ----------------------------------------- */
    --onwave-sidebar-bg: #151B23;
    --onwave-sidebar-bg-hover: #1D2430;
    --onwave-sidebar-bg-active: #262C36;
    --onwave-sidebar-text: #F0F6FC;
    --onwave-sidebar-text-muted: #9198A1;
    --onwave-sidebar-icon: #B7BDC8;
    --onwave-sidebar-border: #3D444D;

    /* Icon rail */
    --onwave-icon-rail-bg: #0D1117;
    --onwave-icon-rail-icon: #656C76;
    --onwave-icon-rail-icon-active: var(--onwave-brand-white);

    /* -----------------------------------------
       HEADER
       ----------------------------------------- */
    --onwave-header-bg: #1D2430;
    --onwave-header-border: #3D444D;
    --onwave-header-text: #F0F6FC;

    /* -----------------------------------------
       BODY / CONTENT AREA
       ----------------------------------------- */
    --onwave-body-bg: #0D1117;
    --onwave-content-bg: #151B23;
    --onwave-content-border: #3D444D;

    /* -----------------------------------------
       TEXT COLORS
       ----------------------------------------- */
    --onwave-text-primary: #F0F6FC;
    --onwave-text-secondary: #B7BDC8;
    --onwave-text-muted: #656C76;
    --onwave-text-inverse: #151B23;

    /* -----------------------------------------
       SEMANTIC COLORS (darker variants)
       ----------------------------------------- */
    /* Success */
    --onwave-success-50: #0D2818;
    --onwave-success-100: #0F3D1E;
    --onwave-success-500: #12B76A;

    /* Warning */
    --onwave-warning-50: #2D1F05;
    --onwave-warning-100: #422D08;
    --onwave-warning-500: #F79009;

    /* Error */
    --onwave-error-50: #2D0F0D;
    --onwave-error-100: #421714;
    --onwave-error-500: #F04438;

    /* Info */
    --onwave-info-50: #0D1F2D;
    --onwave-info-100: #0F2D42;
    --onwave-info-500: #2E90FA;

    /* -----------------------------------------
       INTERACTIVE ELEMENTS
       ----------------------------------------- */
    /* Secondary button */
    --onwave-btn-secondary-bg: #262C36;
    --onwave-btn-secondary-border: #3D444D;
    --onwave-btn-secondary-text: #F0F6FC;
    --onwave-btn-secondary-bg-hover: #2A313C;

    /* -----------------------------------------
       CARDS & SURFACES
       ----------------------------------------- */
    --onwave-card-bg: #1D2430;
    --onwave-card-border: #3D444D;
    --onwave-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --onwave-card-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);

    /* -----------------------------------------
       FORM INPUTS
       ----------------------------------------- */
    --onwave-input-bg: #262C36;
    --onwave-input-border: #3D444D;
    --onwave-input-text: #F0F6FC;
    --onwave-input-placeholder: #656C76;

    /* -----------------------------------------
       DATA TABLES
       ----------------------------------------- */
    --onwave-table-header-bg: #1D2430;
    --onwave-table-row-hover: #262C36;
    --onwave-table-border: #3D444D;

    /* -----------------------------------------
       BADGES & TAGS
       ----------------------------------------- */
    --onwave-badge-neutral-bg: #3D444D;
    --onwave-badge-neutral-text: #E0E0E0;

    /* -----------------------------------------
       BUTTONS (dark mode adjustments)
       ----------------------------------------- */
    --onwave-btn-primary-bg: #E0E0E0;
    --onwave-btn-primary-bg-hover: #F0F6FC;
    --onwave-btn-primary-text: #151B23;
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Copy all dark mode values */
        --onwave-neutral-25: #151B23;
        --onwave-neutral-50: #1D2430;
        --onwave-neutral-100: #262C36;
        --onwave-neutral-200: #2A313C;
        --onwave-neutral-300: #3D444D;
        --onwave-neutral-400: #656C76;
        --onwave-neutral-500: #818B98;
        --onwave-neutral-600: #9198A1;
        --onwave-neutral-700: #B7BDC8;
        --onwave-neutral-800: #E0E0E0;
        --onwave-neutral-900: #F0F6FC;

        --onwave-sidebar-bg: #151B23;
        --onwave-sidebar-bg-hover: #1D2430;
        --onwave-sidebar-bg-active: #262C36;
        --onwave-sidebar-text: #F0F6FC;
        --onwave-sidebar-text-muted: #9198A1;
        --onwave-sidebar-icon: #B7BDC8;
        --onwave-sidebar-border: #3D444D;

        --onwave-icon-rail-bg: #0D1117;
        --onwave-icon-rail-icon: #656C76;
        --onwave-icon-rail-icon-active: var(--onwave-brand-white);

        --onwave-header-bg: #1D2430;
        --onwave-header-border: #3D444D;
        --onwave-header-text: #F0F6FC;

        --onwave-body-bg: #0D1117;
        --onwave-content-bg: #151B23;
        --onwave-content-border: #3D444D;

        --onwave-text-primary: #F0F6FC;
        --onwave-text-secondary: #B7BDC8;
        --onwave-text-muted: #656C76;
        --onwave-text-inverse: #151B23;

        --onwave-card-bg: #1D2430;
        --onwave-card-border: #3D444D;
        --onwave-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

        --onwave-input-bg: #262C36;
        --onwave-input-border: #3D444D;
        --onwave-input-text: #F0F6FC;
        --onwave-input-placeholder: #656C76;

        --onwave-table-header-bg: #1D2430;
        --onwave-table-row-hover: #262C36;
        --onwave-table-border: #3D444D;

        --onwave-btn-secondary-bg: #262C36;
        --onwave-btn-secondary-border: #3D444D;
        --onwave-btn-secondary-text: #F0F6FC;
        --onwave-btn-secondary-bg-hover: #2A313C;

        --onwave-btn-primary-bg: #E0E0E0;
        --onwave-btn-primary-bg-hover: #F0F6FC;
        --onwave-btn-primary-text: #151B23;

        --onwave-badge-neutral-bg: #3D444D;
        --onwave-badge-neutral-text: #E0E0E0;
    }
}