/* ---------------------------------------------------------------------------
   accounts' own suite token layer -- the --hr-* contract shared across every
   SAAR product (HRMS is the reference: /SAAR/hrms/static/build/css/custom.css).

   Split out of what used to be the top of this product's saar-login.css copy,
   because that file must now stay byte-identical to /SAAR/_shared/saar-login.css
   (the suite's shared markup contract) and the master file carries no --hr-*
   tokens of its own -- its .sl__ rules are self-contained on --sl-* tokens.

   Load this file on every screen that is NOT the sign-in screen and wants the
   --hr-* / --dc-* suite look (console/base.html, home.html). The sign-in
   screen does not need it: saar-login.css defines its own --sl-* defaults.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   SUITE TOKEN LAYER -- the --hr-* contract shared across every SAAR product
   (HRMS is the reference: /SAAR/hrms/static/build/css/custom.css). Same
   token names, this product's own accent -- SAAR blue, already this
   product's colour, kept rather than swapped for HRMS's indigo.

   Three states, exactly as HRMS defines them:
     - no stored choice   -> @media (prefers-color-scheme: dark), guarded by
                             :not([data-theme="light"]) so an explicit light
                             choice (should one ever be set) always wins over
                             a dark OS.
     - data-theme="dark"  -> an explicit dark choice.
     - data-theme="light" -> an explicit light choice; also what a bare
                             :root already is, unguarded, below.
   --------------------------------------------------------------------- */
:root {
    --hr-bg:            #f8fafc;
    --hr-surface:       #ffffff;
    --hr-surface-2:     #f1f5f9;
    --hr-border:        #e2e8f0;
    --hr-border-strong: #cbd5e1;

    --hr-ink:           #0f172a;
    --hr-text:          #334155;
    --hr-text-muted:    #64748b;
    --hr-text-faint:    #94a3b8;

    --hr-brand:         #1d4ed8;
    --hr-brand-ink:     #ffffff;
    --hr-brand-text:    #1e40af;
    --hr-brand-soft:    #dbeafe;
    /* Darker than the panel's own decorative violet (#8b5cf6, unchanged
       below) on purpose: this one sits under white button text and #8b5cf6
       measured 4.23:1 against white at the gradient's far end -- a real
       contrast failure, found by computing the ratio at each stop, not by
       eye. #6d28d9 keeps the same hue and measures 7.1:1. */
    --hr-violet:        #6d28d9;

    --hr-success:       #15803d;
    --hr-success-soft:  #dcfce7;
    --hr-warning:       #a35709;
    --hr-warning-soft:  #fef3c7;
    --hr-danger:        #b91c1c;
    --hr-danger-soft:   #fee2e2;
    --hr-info:          #0369a1;
    --hr-info-soft:     #e0f2fe;

    --hr-radius:        9px;
    --hr-radius-lg:     16px;
    --hr-shadow:        0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --hr-shadow-lg:     0 18px 44px rgba(15, 23, 42, .12);
    --hr-ring:          0 0 0 3px rgba(29, 78, 216, .18);

    --hr-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --hr-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --hr-bg:            #0a0e17;
        --hr-surface:       #121824;
        --hr-surface-2:     #1a2130;
        --hr-border:        rgba(255, 255, 255, .10);
        --hr-border-strong: rgba(255, 255, 255, .20);

        --hr-ink:           #f1f5fb;
        --hr-text:          #c8d2e0;
        --hr-text-muted:    #94a1b5;
        --hr-text-faint:    #6b7a90;

        --hr-brand:         #7ea0f8;
        --hr-brand-ink:     #0a0e17;
        --hr-brand-text:    #bcd0fb;
        --hr-brand-soft:    rgba(126, 160, 248, .16);
        --hr-violet:        #b199fa;

        --hr-success:       #4ade80;
        --hr-success-soft:  rgba(74, 222, 128, .15);
        --hr-warning:       #fbbf24;
        --hr-warning-soft:  rgba(251, 191, 36, .15);
        --hr-danger:        #f98080;
        --hr-danger-soft:   rgba(249, 128, 128, .15);
        --hr-info:          #38bdf8;
        --hr-info-soft:     rgba(56, 189, 248, .15);

        --hr-shadow:        0 1px 2px rgba(0, 0, 0, .50), 0 1px 3px rgba(0, 0, 0, .40);
        --hr-shadow-lg:     0 18px 44px rgba(0, 0, 0, .55);
        --hr-ring:          0 0 0 3px rgba(126, 160, 248, .32);
    }
}

:root[data-theme="dark"] {
    --hr-bg:            #0a0e17;
    --hr-surface:       #121824;
    --hr-surface-2:     #1a2130;
    --hr-border:        rgba(255, 255, 255, .10);
    --hr-border-strong: rgba(255, 255, 255, .20);

    --hr-ink:           #f1f5fb;
    --hr-text:          #c8d2e0;
    --hr-text-muted:    #94a1b5;
    --hr-text-faint:    #6b7a90;

    --hr-brand:         #7ea0f8;
    --hr-brand-ink:     #0a0e17;
    --hr-brand-text:    #bcd0fb;
    --hr-brand-soft:    rgba(126, 160, 248, .16);
    --hr-violet:        #b199fa;

    --hr-success:       #4ade80;
    --hr-success-soft:  rgba(74, 222, 128, .15);
    --hr-warning:       #fbbf24;
    --hr-warning-soft:  rgba(251, 191, 36, .15);
    --hr-danger:        #f98080;
    --hr-danger-soft:   rgba(249, 128, 128, .15);
    --hr-info:          #38bdf8;
    --hr-info-soft:     rgba(56, 189, 248, .15);

    --hr-shadow:        0 1px 2px rgba(0, 0, 0, .50), 0 1px 3px rgba(0, 0, 0, .40);
    --hr-shadow-lg:     0 18px 44px rgba(0, 0, 0, .55);
    --hr-ring:          0 0 0 3px rgba(126, 160, 248, .32);
}


/* Same three-state color-scheme contract as every other SAAR shell. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { color-scheme: dark; }
}