/* =====================================================================
   ASVM School - Design Tokens and Base
   theme.css : CSS custom properties (light + dark), resets, typography,
               utilities, keyframes. Loaded before app.css.
   No external font requests - Segoe UI is native on the target machines
   (instant render); Inter/system are graceful fallbacks.
   ===================================================================== */

/* ERP Connect house font: self-hosted Inter (variable, latin) - no internet
   dependency. url is relative to THIS file (Content/), resolves under any vpath. */
@font-face{
    font-family:'Inter';
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url('fonts/inter.woff2') format('woff2');
}
/* App shell, not a document: keep normal scrolling but drop pinch / double-tap
   zoom and Android font inflation (pairs with each page's viewport meta). */
html{
    touch-action:pan-x pan-y;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

:root {
    /* ---- brand & semantic palette ---- */
    /* ===== CHROME = Coca-Cola red (ERP Connect house theme) =====
       Used ONLY for shell, brand, primary CTA, active nav. Never for data. */
    --brand-50:  #FFE5E7;
    --brand-100: #FFD0D3;
    --brand-500: #F40009;
    --brand-600: #F40009;
    --brand-700: #C8000A;
    --brand: var(--brand-600);
    --brand-contrast: #ffffff;

    /* ===== CONTENT = teal + navy + slate + semantic ===== */
    --accent: #0E7490;  --accent-700: #0B5A71;  --accent-tint: #ECF7FA;   /* teal */
    --navy:   #0F2A52;  --navy-2: #173763;                                 /* dark headers */
    --gold:   #C8961E;
    --num: "SFMono-Regular", ui-monospace, "Cascadia Mono", "Roboto Mono", Consolas, monospace;

    --success: #15803D;  --success-soft: #EEF7F0;   /* positive / inflow */
    --warning: #B45309;  --warning-soft: #FEF3C7;
    --danger:  #B91C1C;  --danger-soft:  #FBEEEE;   /* negative / outflow */
    --info:    #0EA5E9;  --info-soft:    #E0F2FE;
    --purple:  #7C3AED;  --purple-soft:  #F1ECFD;

    /* sidebar = red gradient (change these 3 to re-brand the rail) */
    --side-1: #C8000A;
    --side-2: #9B0008;
    --side-3: #7A0006;

    /* ---- surfaces (light) ---- */
    --bg:            #F5F5F7;
    --bg-tint:       none;
    --surface:       #ffffff;
    --surface-2:     #F1F5F9;
    --surface-glass: rgba(255,255,255,0.82);
    --sidebar-bg:    #ffffff;
    --topbar-bg:     rgba(255,255,255,0.85);

    --text:      #0f172a;
    --text-soft: #334155;
    --muted:     #64748b;
    --border:    #E2E8F0;
    --border-strong: #CBD5E1;

    /* ---- radius ---- */
    --r-xs: 6px;
    --r-sm: 8px;
    --r:    10px;
    --r-lg: 12px;
    --r-xl: 15px;
    --r-pill: 999px;

    /* ---- shadows (soft, layered) ---- */
    --sh-xs: 0 1px 2px rgba(15,23,42,.06);
    --sh-sm: 0 2px 6px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --sh:    0 6px 18px -6px rgba(15,23,42,.12), 0 2px 6px -2px rgba(15,23,42,.07);
    --sh-lg: 0 18px 40px -12px rgba(15,23,42,.22), 0 6px 14px -8px rgba(15,23,42,.12);
    --ring:  0 0 0 3px rgba(14,116,144,.20);

    /* ---- layout metrics ---- */
    --topbar-h: 50px;
    --sidebar-w: 222px;
    --sidebar-w-collapsed: 62px;

    /* ---- motion ---- */
    --ease: cubic-bezier(.4,0,.2,1);
    --dur: .22s;

    color-scheme: light;
}

[data-theme="dark"] {
    --brand-50:  #3a0a0c;
    --brand-100: #4d0d10;
    --brand: #F40009;
    --brand-600: #F40009;
    --brand-700: #E00810;

    --accent: #22A7C4;  --accent-700: #7fd0e2;  --accent-tint: #08343f;
    --navy: #12233f;    --navy-2: #0e1c33;
    --gold: #E0B23A;

    --success-soft: #052e16;
    --warning-soft: #3a2606;
    --danger-soft:  #3b0d0d;
    --info-soft:    #082f49;
    --purple: #a855f7;   --purple-soft: #2a1245;

    --side-1: #9B0008;
    --side-2: #7A0006;
    --side-3: #560004;

    --bg:            #0a0f1d;
    --bg-tint:       radial-gradient(1200px 600px at 100% -10%, #16204a 0%, transparent 55%),
                     radial-gradient(900px 500px at -10% 110%, #131a33 0%, transparent 50%);
    --surface:       #121a2c;
    --surface-2:     #0f1626;
    --surface-glass: rgba(18,26,44,0.66);
    --sidebar-bg:    #0e1526;
    --topbar-bg:     rgba(14,21,38,0.72);

    --text:      #e8eef9;
    --text-soft: #c2ccdd;
    --muted:     #8b98af;
    --border:    #1f2a41;
    --border-strong: #2a3750;
    --ring:  0 0 0 3px rgba(109,112,245,.35);

    color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: 'Inter', "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.004em;
    background-color: var(--bg);
    background-image: var(--bg-tint);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

h1,h2,h3,h4,h5,h6 { color: var(--text); font-weight: 650; letter-spacing: -.01em; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border-color: var(--border); opacity: 1; }

/* typographic helpers */
.eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: 11px; font-weight: 700; color: var(--muted); }
.hero-num { font-size: clamp(1.3rem, 1rem + 1.1vw, 1.7rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.05; }
.text-muted, .muted { color: var(--muted) !important; }
.mono { font-variant-numeric: tabular-nums; }

/* focus visibility (accessibility) */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }
.skip-link {
    position: absolute; left: 12px; top: -48px; z-index: 2000;
    background: var(--brand); color: #fff; padding: 8px 14px; border-radius: var(--r-sm);
    transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 10px; text-decoration: none; }

/* selection */
::selection { background: var(--brand-100); color: var(--text); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ---------------------------------------------------------- keyframes */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shimmer { 100% { background-position: 200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* entrance utilities */
.anim-rise  { animation: riseIn .4s var(--ease) both; }
.anim-fade  { animation: fadeIn .35s var(--ease) both; }
.stagger > * { animation: riseIn .42s var(--ease) both; }
.stagger > *:nth-child(1){animation-delay:.02s}
.stagger > *:nth-child(2){animation-delay:.07s}
.stagger > *:nth-child(3){animation-delay:.12s}
.stagger > *:nth-child(4){animation-delay:.17s}
.stagger > *:nth-child(5){animation-delay:.22s}
.stagger > *:nth-child(6){animation-delay:.27s}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}