:root {
    --fa-navy: #02086E;
    --fa-navy-2: #0A1190;
    --fa-green: #0D7C07;
    --fa-green-2: #0E8C08;
    --fa-bg: #FAFAF7;
    --fa-bg-alt: #F2F2EC;
    --fa-line: #E6E6DF;
    --fa-white: #FFFFFF;

    --fa-ink: #1e293b;
    --fa-ink-2: #334155;
    --fa-muted: #6B6B66;
    --fa-muted-2: #94a3b8;
    --fa-field-line: #f1f5f9;
    --fa-field-bg: #f8fafc;

    --fa-danger: #dc3545;
    --fa-danger-soft: rgba(220, 53, 69, 0.12);
    --fa-success-soft-bg: #d1fae5;
    --fa-success-soft-fg: var(--fa-green);
    --fa-warning-soft-bg: #fef3c7;
    --fa-warning-soft-fg: #b45309;
    --fa-neutral-soft-bg: #f1f5f9;
    --fa-neutral-soft-fg: #475569;

    --color-primary: var(--fa-navy);
    --color-primary-hover: var(--fa-navy-2);
    --color-primary-ring: rgba(2, 8, 110, 0.12);
    --color-primary-shadow: rgba(2, 8, 110, 0.25);
    --color-secondary: var(--fa-green);
    --color-secondary-hover: var(--fa-green-2);
    --color-danger: var(--fa-danger);
    --color-danger-soft: var(--fa-danger-soft);

    --surface-bg: var(--fa-bg);
    --surface-bg-alt: var(--fa-bg-alt);
    --surface-card: var(--fa-white);
    --border-line: var(--fa-line);

    --text-strong: var(--fa-ink);
    --text-body: var(--fa-ink-2);
    --text-muted: var(--fa-muted);
    --text-heading: #0A0A0A;

    --btn-radius: 8px;
    --card-radius: 18px;
    --field-radius: 12px;

    --font-base: 'Plus Jakarta Sans', sans-serif;
    --text-sm: 0.84375rem;
    --text-md: 0.9375rem;

    --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.03);
    --shadow-primary: 0 8px 20px -8px rgba(2, 8, 110, 0.45);
    --shadow-elevated: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/* Base typography & canvas — controlled centrally by the tokens above.
   Font applies only to text surfaces; icon fonts (themify/feather) are left untouched. */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar, .sidebar, .btn, .card-title, .form-control {
    font-family: var(--font-base);
}

body {
    background-color: var(--surface-bg);
}

.content-wrapper {
    background-color: var(--surface-bg);
}