/* ==========================================================================
   nav-tokens.css — the ONE place every colour, radius, shadow & spacing for
   the 3-tier navigation lives. Components reference these tokens only (no
   hardcoded hex). Dark mode is defined here once:
     • system default  → @media (prefers-color-scheme: dark), unless the user
       forced light via [data-theme="light"]
     • manual toggle    → [data-theme="dark"] wins in both directions
   ========================================================================== */

:root {
    /* Surfaces & text (light) */
    --nv-bg:        #eef1f6;   /* app ground behind the floating cards */
    --nv-surface:   #ffffff;   /* card background (rail / panel / topbar) */
    --nv-surface-2: #f7f9fc;   /* nested surface (hover rows, inputs) */
    --nv-text:      #0f172a;
    --nv-text-soft: #64748b;
    --nv-text-mute: #94a3b8;
    --nv-border:    #e2e8f0;
    --nv-border-2:  #eef2f6;

    /* Brand — new logo palette (navy) */
    --nv-brand:      #0c3a8e;
    --nv-brand-tint: #e6edf9;

    /* Semantic (status meanings — kept conventional) */
    --nv-success: #16a34a;
    --nv-warning: #d97706;
    --nv-danger:  #dc2626;
    --nv-info:    #1e6be6;

    /* Per-section colours + soft tints — all unified into the new logo family
       (navy → royal → sky) so the active/selected item is always on-brand,
       distinguishable by a subtle ramp rather than clashing hues. */
    --sec-dashboard: #0c3a8e;  --sec-dashboard-tint: #e6edf9;
    --sec-crm:       #2563eb;  --sec-crm-tint:       #e7eefd;
    --sec-emr:       #1e6be6;  --sec-emr-tint:       #e6eefc;
    --sec-hr:        #14479a;  --sec-hr-tint:        #e5ecf8;
    --sec-finance:   #1a57c0;  --sec-finance-tint:   #e6edfb;
    --sec-reports:   #2f80ed;  --sec-reports-tint:   #e8f1fe;
    --sec-ai:        #3b9bff;  --sec-ai-tint:        #e9f4ff;
    --sec-settings:  #4a5a78;  --sec-settings-tint:  #eceff4;

    /* Radii */
    --nv-radius-sm: 8px;
    --nv-radius:    14px;
    --nv-radius-lg: 20px;
    --nv-radius-pill: 999px;

    /* Shadows */
    --nv-shadow-sm: 0 1px 3px rgba(15,23,42,.06);
    --nv-shadow:    0 6px 20px rgba(15,23,42,.10);
    --nv-shadow-lg: 0 20px 48px rgba(15,23,42,.22);

    /* Spacing / metrics */
    --nv-gutter:    12px;   /* gap between the floating cards */
    --nv-rail-w:    64px;
    --nv-panel-w:   248px;
    --nv-topbar-h:  60px;

    /* Glass (topbar) */
    --nv-glass:     rgba(255,255,255,.72);
    --nv-glass-brd: rgba(255,255,255,.55);

    --nv-transition: .18s cubic-bezier(.4,0,.2,1);
    color-scheme: light;
}

/* ---- Dark palette: system default (unless user forced light) ---- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --nv-bg:        #0b1220;
        --nv-surface:   #131c2e;
        --nv-surface-2: #1b263c;
        --nv-text:      #e6edf6;
        --nv-text-soft: #9fb0c6;
        --nv-text-mute: #6b7c94;
        --nv-border:    #26324a;
        --nv-border-2:  #1e293c;

        --nv-brand:      #6ea3e8;
        --nv-brand-tint: #12294a;

        /* Brighter brand-blue accents + on-brand dark tints so the active item
           stays legible and cohesive in dark mode. */
        --sec-dashboard: #6da6ff; --sec-dashboard-tint: #12233f;
        --sec-crm:       #7aa8ff; --sec-crm-tint:       #172a48;
        --sec-emr:       #74acff; --sec-emr-tint:       #14294a;
        --sec-hr:        #6ea0ff; --sec-hr-tint:        #122340;
        --sec-finance:   #72a4ff; --sec-finance-tint:   #142848;
        --sec-reports:   #7db4ff; --sec-reports-tint:   #152b4c;
        --sec-ai:        #86bbff; --sec-ai-tint:        #172e50;
        --sec-settings:  #9fb2d2; --sec-settings-tint:  #1c2536;

        --nv-shadow-sm: 0 1px 3px rgba(0,0,0,.4);
        --nv-shadow:    0 6px 20px rgba(0,0,0,.5);
        --nv-shadow-lg: 0 20px 48px rgba(0,0,0,.6);

        --nv-glass:     rgba(19,28,46,.72);
        --nv-glass-brd: rgba(120,140,170,.18);
        color-scheme: dark;
    }
}

/* ---- Dark palette: manual toggle (wins in both directions) ---- */
:root[data-theme="dark"] {
    --nv-bg:        #0b1220;
    --nv-surface:   #131c2e;
    --nv-surface-2: #1b263c;
    --nv-text:      #e6edf6;
    --nv-text-soft: #9fb0c6;
    --nv-text-mute: #6b7c94;
    --nv-border:    #26324a;
    --nv-border-2:  #1e293c;
    --nv-brand:      #6ea3e8;
    --nv-brand-tint: #12294a;
    --sec-dashboard: #6da6ff; --sec-dashboard-tint: #12233f;
    --sec-crm:       #7aa8ff; --sec-crm-tint:       #172a48;
    --sec-emr:       #74acff; --sec-emr-tint:       #14294a;
    --sec-hr:        #6ea0ff; --sec-hr-tint:        #122340;
    --sec-finance:   #72a4ff; --sec-finance-tint:   #142848;
    --sec-reports:   #7db4ff; --sec-reports-tint:   #152b4c;
    --sec-ai:        #86bbff; --sec-ai-tint:        #172e50;
    --sec-settings:  #9fb2d2; --sec-settings-tint:  #1c2536;
    --nv-shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    --nv-shadow:    0 6px 20px rgba(0,0,0,.5);
    --nv-shadow-lg: 0 20px 48px rgba(0,0,0,.6);
    --nv-glass:     rgba(19,28,46,.72);
    --nv-glass-brd: rgba(120,140,170,.18);
    color-scheme: dark;
}