/*
 * Naplata design tokens: the font, the palette and Bootstrap 5.3 overrides through its CSS custom
 * properties. Loaded right after bootstrap.min.css (assets/app.js), so equal selectors win.
 * docs/06-interfaces/web-ui.md#design-system
 */

/* Inter 4.1 variable (assets/fonts/Inter-LICENSE.txt, SIL Open Font License 1.1). Self-hosted: the CSP is font-src 'self'. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable-jznyFqg.woff2") format('woff2');
}

:root,
[data-bs-theme='light'] {
    /* Brand: deep "ledger" blue for trust, a warm amber accent used sparingly (deadlines, highlights). */
    --nap-primary: #1b4db3;
    --nap-primary-rgb: 27, 77, 179;
    --nap-primary-hover: #163f93;
    --nap-primary-active: #123577;
    --nap-primary-50: #eef3fc;
    --nap-primary-100: #dce6f9;
    --nap-primary-200: #b9cdf2;
    --nap-primary-900: #0c2350;
    --nap-accent: #d97a06;
    --nap-accent-strong: #a85a00; /* 5.3:1 on white, for text */
    --nap-accent-50: #fff6e8;
    --nap-accent-100: #fde9c7;

    /* Neutrals (slate): text contrast on white is 15.4:1 (ink), 11.9:1 (body), 6.2:1 (muted). */
    --nap-ink: #0f172a;
    --nap-text: #1e293b;
    --nap-muted: #566273;
    --nap-subtle: #6b7686; /* 4.6:1 on white: still AA for small text */
    --nap-border: #e2e7ee;
    --nap-border-strong: #cdd5df;
    --nap-surface: #ffffff;
    --nap-surface-2: #f8fafc;
    --nap-canvas: #f3f5f9;

    /* Semantic status colours: text on the -50 tint stays ≥ 4.5:1. */
    --nap-success: #157347;
    --nap-success-50: #e8f6ee;
    --nap-warning: #9a5b00;
    --nap-warning-50: #fff5e0;
    --nap-danger: #b42318;
    --nap-danger-50: #fdecea;
    --nap-info: #0b6e8a;
    --nap-info-50: #e6f4f8;

    /* Spacing scale (4 px base), radii, shadows, motion. */
    --nap-space-1: .25rem;
    --nap-space-2: .5rem;
    --nap-space-3: .75rem;
    --nap-space-4: 1rem;
    --nap-space-5: 1.5rem;
    --nap-space-6: 2rem;
    --nap-space-7: 3rem;
    --nap-space-8: 4.5rem;
    --nap-radius-sm: .375rem;
    --nap-radius: .5rem;
    --nap-radius-lg: .75rem;
    --nap-radius-xl: 1rem;
    --nap-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --nap-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --nap-shadow: 0 4px 12px -2px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .05);
    --nap-shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, .18);
    --nap-focus: 0 0 0 3px rgba(var(--nap-primary-rgb), .35);
    --nap-transition: 150ms ease;

    --app-topbar-h: 3.75rem;
    --app-sidebar-w: 15rem;
    --app-sidebar-w-collapsed: 4.25rem;

    /* Bootstrap 5.3 hooks. */
    --bs-primary: var(--nap-primary);
    --bs-primary-rgb: var(--nap-primary-rgb);
    --bs-primary-text-emphasis: var(--nap-primary-hover);
    --bs-primary-bg-subtle: var(--nap-primary-50);
    --bs-primary-border-subtle: var(--nap-primary-200);
    --bs-secondary: #475569;
    --bs-secondary-rgb: 71, 85, 105;
    --bs-secondary-text-emphasis: #334155;
    --bs-secondary-bg-subtle: #eef1f5;
    --bs-secondary-border-subtle: #d5dbe3;
    --bs-success: var(--nap-success);
    --bs-success-rgb: 21, 115, 71;
    --bs-success-text-emphasis: #0e5132;
    --bs-success-bg-subtle: var(--nap-success-50);
    --bs-success-border-subtle: #b5e0c8;
    --bs-warning: #e59a13;
    --bs-warning-rgb: 229, 154, 19;
    --bs-warning-text-emphasis: #7a4700;
    --bs-warning-bg-subtle: var(--nap-warning-50);
    --bs-warning-border-subtle: #f5d69a;
    --bs-danger: var(--nap-danger);
    --bs-danger-rgb: 180, 35, 24;
    --bs-danger-text-emphasis: #8a1a12;
    --bs-danger-bg-subtle: var(--nap-danger-50);
    --bs-danger-border-subtle: #f4bcb6;
    --bs-info: var(--nap-info);
    --bs-info-rgb: 11, 110, 138;
    --bs-info-text-emphasis: #07506a;
    --bs-info-bg-subtle: var(--nap-info-50);
    --bs-info-border-subtle: #a9d8e6;
    --bs-light: #f1f4f8;
    --bs-light-rgb: 241, 244, 248;
    --bs-light-text-emphasis: #334155;
    --bs-light-bg-subtle: #f8fafc;
    --bs-light-border-subtle: #e2e7ee;
    --bs-dark: var(--nap-ink);
    --bs-dark-rgb: 15, 23, 42;

    --bs-body-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-font-monospace: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    --bs-body-font-size: .9375rem;
    --bs-body-line-height: 1.55;
    --bs-body-color: var(--nap-text);
    --bs-body-color-rgb: 30, 41, 59;
    --bs-body-bg: var(--nap-surface); /* components (cards, inputs, offcanvas) sit on white; body.app paints the canvas */
    --bs-emphasis-color: var(--nap-ink);
    --bs-secondary-color: var(--nap-muted);
    --bs-tertiary-bg: var(--nap-surface-2);
    --bs-heading-color: var(--nap-ink);
    --bs-border-color: var(--nap-border);
    --bs-border-color-translucent: rgba(15, 23, 42, .1);
    --bs-border-radius: var(--nap-radius);
    --bs-border-radius-sm: var(--nap-radius-sm);
    --bs-border-radius-lg: var(--nap-radius-lg);
    --bs-border-radius-xl: var(--nap-radius-xl);
    --bs-box-shadow: var(--nap-shadow);
    --bs-box-shadow-sm: var(--nap-shadow-sm);
    --bs-box-shadow-lg: var(--nap-shadow-lg);
    --bs-link-color: var(--nap-primary);
    --bs-link-color-rgb: var(--nap-primary-rgb);
    --bs-link-hover-color: var(--nap-primary-active);
    --bs-link-hover-color-rgb: 18, 53, 119;
    --bs-focus-ring-color: rgba(var(--nap-primary-rgb), .35);
    --bs-focus-ring-width: 3px;
    --bs-highlight-bg: var(--nap-accent-100);
}