/* ==========================================================================
   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:        #ecf4f3;   /* app ground behind the floating cards */
    --nv-surface:   #ffffff;   /* card background (rail / panel / topbar) */
    --nv-surface-2: #f5faf9;   /* nested surface (hover rows, inputs) */
    --nv-text:      #0b2427;
    --nv-text-soft: #5b7678;
    --nv-text-mute: #8ba5a6;
    --nv-border:    #dbe7e5;
    --nv-border-2:  #e8f2f0;

    /* Brand — Clopr Dental "Pearl Teal" (teal + one warm coral accent) */
    --nv-brand:      #0b7a85;
    --nv-brand-tint: #e0f2f0;
    --nv-accent:      #ff7a5c;
    --nv-accent-tint: #ffe9e3;

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

    /* Per-section colours + soft tints — all unified into the brand family
       (ink → teal → aqua) so the active/selected item is always on-brand,
       distinguishable by a subtle ramp rather than clashing hues. */
    --sec-dashboard: #073b42;  --sec-dashboard-tint: #e0f2f0;
    --sec-crm:       #0e8c97;  --sec-crm-tint:       #e2f4f2;
    --sec-emr:       #0b7a85;  --sec-emr-tint:       #e1f3f1;
    --sec-today:     #0b7a85;  --sec-today-tint:     #e1f3f1;
    --sec-hr:        #0a5560;  --sec-hr-tint:        #dff1ef;
    --sec-finance:   #0d6c76;  --sec-finance-tint:   #e1f3f1;
    --sec-inventory: #0f8a8f;  --sec-inventory-tint: #ddf2f0;
    --sec-reports:   #1599a3;  --sec-reports-tint:   #e4f6f4;
    --sec-ai:        #19c3c9;  --sec-ai-tint:        #e6f8f6;
    --sec-settings:  #4f6b6e;  --sec-settings-tint:  #e9f0ef;

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

    /* Shadows */
    --nv-shadow-sm: 0 1px 3px rgba(9,36,39,.06);
    --nv-shadow:    0 6px 20px rgba(9,36,39,.10);
    --nv-shadow-lg: 0 20px 48px rgba(9,36,39,.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:        #071517;
        --nv-surface:   #0d2022;
        --nv-surface-2: #142b2e;
        --nv-text:      #e2f0ef;
        --nv-text-soft: #93b0ae;
        --nv-text-mute: #607f7d;
        --nv-border:    #1f3a3d;
        --nv-border-2:  #183134;

        --nv-brand:      #3fc4c8;
        --nv-brand-tint: #0d2e31;
        --nv-accent:      #ff9478;
        --nv-accent-tint: #3a211b;

        /* Brighter brand-teal accents + on-brand dark tints so the active item
           stays legible and cohesive in dark mode. */
        --sec-dashboard: #4fd1d4; --sec-dashboard-tint: #0c2a2d;
        --sec-crm:       #5bd3d3; --sec-crm-tint:       #0f2f33;
        --sec-emr:       #55cfd2; --sec-emr-tint:       #0e2d31;
        --sec-today: #55cfd2; --sec-today-tint: #0e2d31;
        --sec-hr:        #4cc9cc; --sec-hr-tint:        #0c292c;
        --sec-finance:   #50cdd0; --sec-finance-tint:   #0e2c30;
        --sec-inventory: #5fd6cf; --sec-inventory-tint: #0d2b2d;
        --sec-reports:   #62d6d8; --sec-reports-tint:   #0f3034;
        --sec-ai:        #6fdcdc; --sec-ai-tint:        #103337;
        --sec-settings:  #9fbcbb; --sec-settings-tint:  #18292b;

        --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(13,32,34,.72);
        --nv-glass-brd: rgba(120,170,168,.18);
        color-scheme: dark;
    }
}

/* ---- Dark palette: manual toggle (wins in both directions) ---- */
:root[data-theme="dark"] {
    --nv-bg:        #071517;
    --nv-surface:   #0d2022;
    --nv-surface-2: #142b2e;
    --nv-text:      #e2f0ef;
    --nv-text-soft: #93b0ae;
    --nv-text-mute: #607f7d;
    --nv-border:    #1f3a3d;
    --nv-border-2:  #183134;
    --nv-brand:      #3fc4c8;
    --nv-brand-tint: #0d2e31;
    --nv-accent:      #ff9478;
    --nv-accent-tint: #3a211b;
    --sec-dashboard: #4fd1d4; --sec-dashboard-tint: #0c2a2d;
    --sec-crm:       #5bd3d3; --sec-crm-tint:       #0f2f33;
    --sec-emr:       #55cfd2; --sec-emr-tint:       #0e2d31;
    --sec-today: #55cfd2; --sec-today-tint: #0e2d31;
    --sec-hr:        #4cc9cc; --sec-hr-tint:        #0c292c;
    --sec-finance:   #50cdd0; --sec-finance-tint:   #0e2c30;
    --sec-inventory: #5fd6cf; --sec-inventory-tint: #0d2b2d;
    --sec-reports:   #62d6d8; --sec-reports-tint:   #0f3034;
    --sec-ai:        #6fdcdc; --sec-ai-tint:        #103337;
    --sec-settings:  #9fbcbb; --sec-settings-tint:  #18292b;
    --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(13,32,34,.72);
    --nv-glass-brd: rgba(120,170,168,.18);
    color-scheme: dark;
}