/* ================================================================
   KANOON MITRA SOLUTIONS — LABOUR LAW COMPLIANCE PORTAL — CTC CALCULATOR RE-THEME
   Loaded AFTER the tool's own inline <style> block, so these :root
   overrides win the cascade with zero HTML/JS changes — same safe
   overlay approach used for motion-contractor-audit.css. The tool's
   entire navy/gold system runs through 8 CSS variables with no
   hardcoded duplicates anywhere else in the file (verified), so
   remapping them here recolors the whole calculator consistently.
   Functional accent colors (teal/green/red/orange/purple, used to
   tell PF/ESI/Gratuity/LWF sections apart at a glance) are kept
   distinct on purpose — only red/green are pulled fully in line
   with the portal's own --red/--green so they read as "the same
   red" as everywhere else, not a clashing third shade.
   ================================================================ */

:root {
    /* was navy #060f1e -> #2657b8; now the portal's ink scale */
    --n1: #0f1419;
    --n2: #142850;
    --n3: #2a333f;
    --n4: #3d4a5c;

    /* was amber #b8861a -> #fdf5e0; now the portal's actual gold scale */
    --g1: #a3853a;
    --g2: #c9a84c;
    --g3: #f0d98a;
    --g4: #fdf6e3;

    /* functional accents kept distinct, deepened slightly to feel less "stock" */
    --t1: #0a4f4f;
    --t2: #0d6e6e;
    --t3: #e6f4f4;
    --v1: #163a28;
    --v2: #1a6b3c; /* == portal --green */
    --v3: #e6f3ea;
    --r1: #8c1515;
    --r2: #c0392b; /* == portal --red */
    --r3: #fbe9e7;
    --o1: #8a3200;
    --o2: #b8480a;
    --o3: #fdf0e6;
    --p1: #341668;
    --p2: #4f2a9c;
    --p3: #f2edfb;

    --s1: #2a2a2a;
    --s2: #6b6255;
    --s3: #faf8f3;
    --s4: #f0ebe0;
    --s5: #e2d9c8;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--s3);
    color: var(--n1);
}

/* ---------- Motion: panel switch, card entrance, table + button polish ---------- */
@keyframes ctc-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ctc-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
    .panel.on { animation: ctc-fade-in .35s ease both; }
    .panel.on .card { animation: ctc-fade-up .4s cubic-bezier(.2,.8,.2,1) both; }
    .panel.on .card:nth-of-type(2) { animation-delay: .05s; }
    .panel.on .card:nth-of-type(3) { animation-delay: .1s; }
    .panel.on .card:nth-of-type(4) { animation-delay: .15s; }
}

.tab { transition: color .2s ease, background .2s ease, border-color .2s ease; border-bottom: 2px solid transparent; }
.tab.on { border-bottom-color: var(--g2); }

.card { transition: box-shadow .25s ease, transform .25s ease; }
.card:hover { box-shadow: var(--sh2); }

table.dt tbody tr { transition: background .18s ease; }
table.dt tbody tr:hover { background: var(--g4); }

.cta-btn { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.cta-btn:hover { transform: translateY(-2px); }

.fw-card { transition: transform .25s ease, box-shadow .25s ease; }
.fw-card:hover { transform: translateY(-3px); box-shadow: var(--sh2); }

#mwSyncStatus { transition: background .18s ease, color .18s ease; }