/* hr-app/public/assets/css/tokens.css
   MRA HR System — shared design tokens.
   Rebased to MRA's actual brand: navy + gold, matching the main
   site's admin panel and every branded document produced for MRA.
   Every page in this app should link this file rather than
   redefining colors/spacing locally.
*/

:root {
    /* Surfaces */
    --bg-page: #f0f2f7;
    --bg-card: #ffffff;
    --bg-input: #f8fafc;
    --border-subtle: #e4eaf3;

    /* Text */
    --text-primary: #0a2c52;
    --text-body: #1a2535;
    --text-muted: #5a6a7e;
    --text-faint: #94a3b8;
    --text-footer: #94a3b8;

    /* Brand — navy + gold, MRA's actual identity */
    --navy: #0a2c52;
    --navy-2: #103d6d;
    --gold: #d4a017;
    --gold-2: #ffd700;
    --brand-red: #c0392b;

    --accent-1: #0a2c52;
    --accent-2: #d4a017;
    --accent-gradient: linear-gradient(135deg, #d4a017, #ffd700);
    --accent-soft-bg: #fdf6e3;

    /* Sidebar — dark navy, matching the main site's admin panel exactly */
    --sidebar-bg-1: #0b2f58;
    --sidebar-bg-2: #103d6d;
    --sidebar-text: rgba(255,255,255,0.76);
    --sidebar-text-strong: #ffffff;
    --sidebar-text-faint: rgba(255,255,255,0.45);
    --sidebar-active-bg: linear-gradient(135deg, #d4a017, #ffd700);
    --sidebar-active-text: #0a2c52;
    --sidebar-hover-bg: rgba(255,255,255,0.09);
    --sidebar-border: rgba(255,255,255,0.10);

    /* Status / traffic light (Compliance and beyond) */
    --status-green-bg: #dcfce7;
    --status-green-text: #16a34a;
    --status-green-border: #bbf0cf;

    --status-amber-bg: #fef9c3;
    --status-amber-text: #854d0e;
    --status-amber-border: #fbe3ad;

    --status-red-bg: #fee2e2;
    --status-red-text: #991b1b;
    --status-red-border: #f8c9c9;

    /* Chart palette, for donut/ring breakdowns */
    --chart-1: #0a2c52;
    --chart-2: #d4a017;
    --chart-3: #16a34a;
    --chart-4: #38bdf8;
    --chart-5: #c0392b;

    /* Spacing scale */
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;

    /* Shadow */
    --shadow-card: 0 12px 32px rgba(10,44,82,0.08);
    --shadow-soft: 0 4px 14px rgba(10,44,82,0.06);
    --shadow-pop: 0 24px 60px rgba(10,44,82,0.16);

    /* Type */
    --font-body: 'Inter', sans-serif;
}

/* Base resets, shared by every page */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--text-body);
    min-height: 100vh;
}

a { color: var(--navy); }

/* Shared status chip, used anywhere a traffic-light state appears */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.chip--green { background: var(--status-green-bg); color: var(--status-green-text); border-color: var(--status-green-border); }
.chip--amber { background: var(--status-amber-bg); color: var(--status-amber-text); border-color: var(--status-amber-border); }
.chip--red   { background: var(--status-red-bg); color: var(--status-red-text); border-color: var(--status-red-border); }

/* Shared card */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-soft);
}

/* Shared button */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.btn--primary { background: var(--accent-gradient); color: var(--navy); box-shadow: 0 8px 20px rgba(212,160,23,0.32); }
.btn--primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn--outline { background: var(--bg-card); color: var(--text-body); border: 1px solid var(--border-subtle); }
.btn--outline:hover { border-color: var(--navy); color: var(--navy); }
PHPEOF