/* ============================================================
   MUNICIBID THEME VARIABLE SYSTEM
   ============================================================
   This file defines ALL semantic color variables for the site.
   It MUST be loaded BEFORE all other stylesheets.

   Light mode  = :root (default)
   Dark mode   = [data-theme="dark"]
   OS auto     = @media (prefers-color-scheme: dark)
   ============================================================ */

:root {
    /* ---- Backgrounds ---- */
    --bg-body:            #ffffff;
    --bg-surface:         #ffffff;
    --bg-surface-alt:     #f5f6f7;
    --bg-surface-hover:   #f0f1f3;
    --bg-muted:           #e9ecef;
    --bg-input:           #ffffff;
    --bg-header:          #214964;
    --bg-footer:          #1e1e1e;
    --bg-footer-inner:    #000000;
    --bg-dropdown:        #3586BB;
    --bg-code:            #f4f4f5;
    --bg-tooltip:         #333333;
    --bg-overlay:         rgba(0, 0, 0, 0.6);

    /* ---- Text ---- */
    --text-primary:       #545454;
    --text-secondary:     #686868;
    --text-heading:       #222222;
    --text-strong:        #333333;
    --text-on-primary:    #ffffff;
    --text-on-dark:       #ffffff;
    --text-link:          #3586BB;
    --text-link-hover:    #2a6d99;
    --text-placeholder:   #999999;
    --text-muted:         #6c757d;
    --text-inverse:       #ffffff;

    /* ---- Borders ---- */
    --border-color:       #dddddd;
    --border-light:       #e9ecef;
    --border-input:       #cfd3d8;
    --border-card:        #e5e7eb;
    --border-focus:       #3586BB;

    /* ---- Brand / Accent Colors ---- */
    --color-primary:      #3586BB;
    --color-primary-hover:#2a6d99;
    --color-primary-rgb:  53, 134, 187;
    --color-accent:       #FFC637;
    --color-accent-alt:   #f3bc24;
    --color-success:      #17c671;
    --color-danger:       #c4183c;
    --color-danger-soft:  #e67b7b;
    --color-warning:      #FFB400;
    --color-info:         #00b8d8;
    --color-bootstrap-blue: #007bff;

    /* ---- Shadows ---- */
    --shadow-color:       rgba(40, 47, 60, 0.05);
    --shadow-sm:          0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:          0 4px 15px rgba(0,0,0,0.08);
    --shadow-lg:          0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl:          0 25px 60px rgba(0,0,0,0.15);
    --shadow-card:        0 2px 8px rgba(40, 47, 60, 0.08);
    --shadow-card-hover:  0 8px 25px rgba(40, 47, 60, 0.15);

    /* ---- Gradients ---- */
    --gradient-subtle:    linear-gradient(to bottom, #fdfbfb 0%, #ebedee 100%);

    /* ---- Misc ---- */
    --scrollbar-track:    #f1f1f1;
    --scrollbar-thumb:    #c1c1c1;
    --selection-bg:       rgba(53,134,187,0.2);
    --focus-ring:         rgba(53,134,187,0.25);

    /* ---- Footer ---- */
    --footer-link:        #46A9E9;
    --footer-text:        #CCCCCC;
    --footer-heading:     #ffffff;
    --footer-hr:          #555555;

    /* ---- Cards (listing/account) ---- */
    --card-bg:            #ffffff;
    --card-border:        #e5e7eb;
    --card-shadow:        0 2px 8px rgba(40, 47, 60, 0.08);
    --card-shadow-hover:  0 8px 25px rgba(40, 47, 60, 0.15);

    /* ---- Tables ---- */
    --table-bg:           transparent;
    --table-stripe:       rgba(0, 0, 0, 0.03);
    --table-hover:        rgba(0, 0, 0, 0.05);
    --table-border:       #dee2e6;

    /* ---- Badges / Tags ---- */
    --badge-bg:           #e9ecef;
    --badge-text:         #545454;

    /* ---- Status indicators ---- */
    --status-active:      #17c671;
    --status-closed:      #c4183c;
    --status-pending:     #FFB400;
    --status-draft:       #6c757d;
}


/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
    /* ---- Backgrounds ---- */
    --bg-body:            #162231;
    --bg-surface:         #162231;
    --bg-surface-alt:     #1a2940;
    --bg-surface-hover:   #1f3048;
    --bg-muted:           #243447;
    --bg-input:           #1a2940;
    --bg-header:          #214964;
    --bg-footer:          #0a0f14;
    --bg-footer-inner:    #060a0e;
    --bg-dropdown:        #1a3550;
    --bg-code:            #1a2940;
    --bg-tooltip:         #243447;
    --bg-overlay:         rgba(0, 0, 0, 0.75);

    /* ---- Text ---- */
    --text-primary:       #d4dce6;
    --text-secondary:     #8fa3b8;
    --text-heading:       #e8edf2;
    --text-strong:        #f0f3f6;
    --text-on-primary:    #ffffff;
    --text-on-dark:       #ffffff;
    --text-link:          #5ab0e0;
    --text-link-hover:    #7cc4ed;
    --text-placeholder:   #5a7085;
    --text-muted:         #7a8fa3;
    --text-inverse:       #0f1923;

    /* ---- Borders ---- */
    --border-color:       #2a3f54;
    --border-light:       #1e3246;
    --border-input:       #2a3f54;
    --border-card:        #253648;
    --border-focus:       #4a9fd4;

    /* ---- Brand / Accent Colors (adjusted for dark) ---- */
    --color-primary:      #4a9fd4;
    --color-primary-hover:#5ab0e0;
    --color-primary-rgb:  74, 159, 212;
    --color-accent:       #FFC637;
    --color-accent-alt:   #f3bc24;
    --color-success:      #2dd183;
    --color-danger:       #e05b7a;
    --color-danger-soft:  #d48a8a;
    --color-warning:      #ffc42e;
    --color-info:         #20cce8;
    --color-bootstrap-blue: #4a9fd4;

    /* ---- Shadows (deeper in dark) ---- */
    --shadow-color:       rgba(0, 0, 0, 0.2);
    --shadow-sm:          0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
    --shadow-md:          0 4px 15px rgba(0,0,0,0.3);
    --shadow-lg:          0 8px 24px rgba(0,0,0,0.4);
    --shadow-xl:          0 25px 60px rgba(0,0,0,0.5);
    --shadow-card:        0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-card-hover:  0 8px 25px rgba(0, 0, 0, 0.4);

    /* ---- Gradients ---- */
    --gradient-subtle:    linear-gradient(to bottom, #162231 0%, #1a2940 100%);

    /* ---- Misc ---- */
    --scrollbar-track:    #162231;
    --scrollbar-thumb:    #2a3f54;
    --selection-bg:       rgba(74,159,212,0.3);
    --focus-ring:         rgba(74,159,212,0.35);

    /* ---- Footer ---- */
    --footer-link:        #5ab0e0;
    --footer-text:        #a0b0c0;
    --footer-heading:     #e8edf2;
    --footer-hr:          #2a3f54;

    /* ---- Cards ---- */
    --card-bg:            #162231;
    --card-border:        #253648;
    --card-shadow:        0 2px 8px rgba(0, 0, 0, 0.3);
    --card-shadow-hover:  0 8px 25px rgba(0, 0, 0, 0.4);

    /* ---- Tables ---- */
    --table-bg:           transparent;
    --table-stripe:       rgba(255, 255, 255, 0.03);
    --table-hover:        rgba(255, 255, 255, 0.05);
    --table-border:       #2a3f54;

    /* ---- Badges / Tags ---- */
    --badge-bg:           #243447;
    --badge-text:         #d4dce6;

    /* ---- Status (slightly brighter for dark) ---- */
    --status-active:      #2dd183;
    --status-closed:      #e05b7a;
    --status-pending:     #ffc42e;
    --status-draft:       #7a8fa3;
}


/* ============================================================
   OS PREFERENCE AUTO-DETECT (fallback when no explicit toggle)
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --bg-body:            #162231;
        --bg-surface:         #162231;
        --bg-surface-alt:     #1a2940;
        --bg-surface-hover:   #1f3048;
        --bg-muted:           #243447;
        --bg-input:           #1a2940;
        --bg-header:          #214964;
        --bg-footer:          #0a0f14;
        --bg-footer-inner:    #060a0e;
        --bg-dropdown:        #1a3550;
        --bg-code:            #1a2940;
        --bg-tooltip:         #243447;
        --bg-overlay:         rgba(0, 0, 0, 0.75);
        --text-primary:       #d4dce6;
        --text-secondary:     #8fa3b8;
        --text-heading:       #e8edf2;
        --text-strong:        #f0f3f6;
        --text-on-primary:    #ffffff;
        --text-on-dark:       #ffffff;
        --text-link:          #5ab0e0;
        --text-link-hover:    #7cc4ed;
        --text-placeholder:   #5a7085;
        --text-muted:         #7a8fa3;
        --text-inverse:       #0f1923;
        --border-color:       #2a3f54;
        --border-light:       #1e3246;
        --border-input:       #2a3f54;
        --border-card:        #253648;
        --border-focus:       #4a9fd4;
        --color-primary:      #4a9fd4;
        --color-primary-hover:#5ab0e0;
        --color-primary-rgb:  74, 159, 212;
        --color-success:      #2dd183;
        --color-danger:       #e05b7a;
        --color-danger-soft:  #d48a8a;
        --color-warning:      #ffc42e;
        --color-info:         #20cce8;
        --color-bootstrap-blue: #4a9fd4;
        --shadow-color:       rgba(0, 0, 0, 0.2);
        --shadow-sm:          0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
        --shadow-md:          0 4px 15px rgba(0,0,0,0.3);
        --shadow-lg:          0 8px 24px rgba(0,0,0,0.4);
        --shadow-xl:          0 25px 60px rgba(0,0,0,0.5);
        --shadow-card:        0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-card-hover:  0 8px 25px rgba(0, 0, 0, 0.4);
        --gradient-subtle:    linear-gradient(to bottom, #162231 0%, #1a2940 100%);
        --scrollbar-track:    #162231;
        --scrollbar-thumb:    #2a3f54;
        --selection-bg:       rgba(74,159,212,0.3);
        --focus-ring:         rgba(74,159,212,0.35);
        --footer-link:        #5ab0e0;
        --footer-text:        #a0b0c0;
        --footer-heading:     #e8edf2;
        --footer-hr:          #2a3f54;
        --card-bg:            #162231;
        --card-border:        #253648;
        --card-shadow:        0 2px 8px rgba(0, 0, 0, 0.3);
        --card-shadow-hover:  0 8px 25px rgba(0, 0, 0, 0.4);
        --table-bg:           transparent;
        --table-stripe:       rgba(255, 255, 255, 0.03);
        --table-hover:        rgba(255, 255, 255, 0.05);
        --table-border:       #2a3f54;
        --badge-bg:           #243447;
        --badge-text:         #d4dce6;
        --status-active:      #2dd183;
        --status-closed:      #e05b7a;
        --status-pending:     #ffc42e;
        --status-draft:       #7a8fa3;
    }
}