/* ==========================================================================
   Payroll SaaS — craft layer
   Depth, texture and motion over the Tailwind utility classes.
   Served statically from /public/css — no build step.
   ========================================================================== */

:root {
    --cloud:   #F7F8FA;
    --ink:     #1b2230;   /* tuned slate near-black, never pure #000 */
    --indigo:  #4F46E5;
    --mint:    #10B981;
    --amber:   #F59E0B;
    --slate:   #6B7280;
}

/* --- typography: a display face paired with a UI face -------------------
   Space Grotesk carries headings; IBM Plex Sans the UI and data tables. */
body,
.font-body {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    color: var(--ink);
}
h1, h2, h3, h4,
.font-display {
    font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
}

/* --- texture: a faint cool grain so the canvas isn't a flat fill -------- */
body {
    background-color: var(--cloud);
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(27,34,48,0.02) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    background-attachment: fixed;
}

/* --- elevation: cards and panels sit above the page --------------------- */
.pr-card,
[class*="rounded-xl"].border,
[class*="rounded-2xl"].border {
    box-shadow:
        0 1px 2px rgba(27, 34, 48, 0.04),
        0 10px 24px -12px rgba(27, 34, 48, 0.16);
}

/* stat cards + interactive tiles lift on hover */
.pr-lift {
    transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.2s ease;
}
.pr-lift:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 4px rgba(27, 34, 48, 0.06),
        0 18px 36px -14px rgba(27, 34, 48, 0.26);
}

/* --- sidebar: a deep indigo-slate gradient for dimension --------------- */
.pr-sidebar {
    background-image: linear-gradient(
        185deg, #232c3f 0%, #1b2230 55%, #161c28 100%
    );
}

/* --- primary buttons: a subtle gradient + press motion ----------------- */
.pr-btn-primary {
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0.16) 0%, rgba(0, 0, 0, 0.07) 100%);
    box-shadow: 0 2px 8px -1px rgba(79, 70, 229, 0.4);
    transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.pr-btn-primary:hover { box-shadow: 0 4px 14px -2px rgba(79, 70, 229, 0.5); }
.pr-btn-primary:active { transform: translateY(1px); }

/* --- the clock-in control: a soft mint wash when clocked in ------------ */
.pr-clocked-in {
    background-image: linear-gradient(
        160deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.02) 70%, transparent 100%
    );
}

/* --- table rows: gentle tint on hover ---------------------------------- */
.pr-row { transition: background-color 0.14s ease; }

/* --- KPI numbers count-in feel: a quiet entrance ----------------------- */
@keyframes pr-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pr-rise { animation: pr-rise 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }