/* ================================================================
   KANOON MITRA SOLUTIONS — LABOUR LAW COMPLIANCE PORTAL — ATTENDANCE / MUSTER ROLL
   RE-THEME. Loaded AFTER the tool's own inline <style> block so
   these overrides win the cascade with zero HTML/JS changes.

   Re-aligned to the portal's ACTUAL tokens (shared/theme.css: --ink
   #0f1f3d, --gold #1a56db — "gold" is a legacy name, the real accent
   is blue). An earlier pass here mistakenly reintroduced an amber/gold
   palette and warm cream neutrals; this version uses the real ink/blue
   scale and cool neutrals so the tool matches the rest of the site.

   Functional attendance-status colors (Present/Absent/Off/EL/CL/SL/
   ML/Holiday) are deliberately left untouched — they exist to be
   visually distinct from each other and from the brand palette, and
   recoloring them would hurt readability of the actual attendance
   grid for no visual-identity benefit.
   ================================================================ */

:root {
    --navy: #0f1f3d;
    --navy-mid: #24406b;
    --navy-light: #24406b;

    --g1: #1a56db;
    --g2: #7ba3ef;
    --g3: #123d99;
    --g4: #eaf1fd;

    --brand-ink: #0f1f3d;
    --brand-dark: #0d1730;
    --brand-mid: #14294f;
    --brand-surface: #1a2e52;

    --slate: #4a5568;
    --steel: #718096;
    --silver: #a0aec0;
    --cloud: #e2e8f0;
    --mist: #f1f5f9;
    --snow: #f8fafc;
    --text: #1a202c;
}

body { font-family: 'Archivo', sans-serif; }

#brandingPage,
.brand-firm, .brand-firm-sub, .brand-section-title, .btc-title, .brand-footer-name,
.brand-nav-title, .app-header h1,
.brand-tagline, .brand-section-sub,
.brand-nav-sub, .brand-nav-cta, .brand-eyebrow, .cpill, .btc-desc, .btc-btn,
.brand-footer-pill, .brand-footer-copy, .app-header-tag, .app-header .sub, .btn-brand {
    font-family: 'Archivo', sans-serif;
}

/* ---------- Motion ---------- */
@keyframes at-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: no-preference) {
    .setup-card, .card { animation: at-fade-up .4s cubic-bezier(.2,.8,.2,1) both; }
}

.btn, .btn-primary, .btn-outline, .btn-ghost, .btn-brand {
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }

.setup-card, .card {
    transition: box-shadow .25s ease;
}
.tab { transition: color .2s ease, border-color .2s ease; }

table tbody tr:hover td:not([style*="background"]) { background: var(--g4); }