/* ============================================================================
IPPRA KPI Tool — Design Tokens (PRODUCTION · Crimson Classic)
----------------------------------------------------------------------------
Single source of truth. Vanilla CSS custom properties — no build step.
Load order: tokens.css → base.css → app.css
Fonts (add to your layout ):
========================================================================= */
:root {
/* ---- Type families ---- */
--font-heading: "Archivo", system-ui, sans-serif;
--font-body: "Public Sans", system-ui, sans-serif;
--heading-weight: 800;
--heading-tracking: -0.01em;
/* ---- Brand (OU crimson, refined) ---- */
--brand: #841617;
--brand-dark: #6b1113;
--brand-darker: #531011; /* admin chrome */
--brand-tint: #f7ebe9; /* subtle brand wash */
--brand-tint-2: #f1dcd9;
--brand-contrast: #fffaf6; /* text on brand */
--on-brand-dim: rgba(255, 248, 243, 0.72);
/* ---- Section chrome colors (navbar identity per app section) ---- */
--section-user: var(--brand); /* main / personal — OU crimson */
--section-reports: #136f63; /* reporting (item list/entry) — teal */
--section-admin: #22375c; /* admin — navy */
/* ---- Surfaces (warm cream neutrals) ---- */
--page-bg: #f7f3ee;
--surface: #ffffff;
--surface-2: #faf6f1;
--surface-hover: #f6efe7;
--surface-inset: #f3ece3;
/* ---- Text ---- */
--text-heading: #2a1a16;
--text-body: #4a3f3a;
--text-muted: #8a7d75;
--text-faint: #ab9f96;
/* ---- Lines ---- */
--border: #e7dcd2;
--border-strong: #d8c9bd;
/* ---- Accents / data ---- */
--accent: #841617;
--accent-soft: #b5532f; /* warm gold-brown secondary */
/* ---- Chart.js palette ---- */
--chart-1: #841617;
--chart-2: #c47a2c; /* warm gold */
--chart-3: #5e7d5a; /* sage */
--chart-4: #8a7d75;
--chart-grid: #e7dcd2;
/* ---- Status colors (workflow meaning — keep distinct) ---- */
--draft-bg: #fde8e8; --draft-fg: #9b1c1c; --draft-dot: #dc2626;
--certified-bg: #fdf0d5; --certified-fg: #8a5400; --certified-dot: #d99100;
--reviewed-bg: #d7f2e3; --reviewed-fg: #0a6b46; --reviewed-dot: #12a06a;
--info-bg: #dde8fb; --info-fg: #1c44a8; --info-dot: #2f63d6;
/* ---- Functional ---- */
--success: #15875a; --success-dark: #0f6b47;
--danger: #d63b3b; --danger-dark: #b62a2a;
/* ---- Focus + shadows ---- */
--focus-ring: rgba(132, 22, 23, 0.28);
--shadow-sm: 0 1px 2px rgba(64, 28, 20, 0.06), 0 1px 3px rgba(64, 28, 20, 0.05);
--shadow-md: 0 2px 6px rgba(64, 28, 20, 0.07), 0 6px 18px rgba(64, 28, 20, 0.06);
--shadow-lg: 0 12px 34px rgba(64, 28, 20, 0.13);
--navbar-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
/* ---- Spacing scale (compact: tuned for fast data entry) ---- */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
--space-12: 48px; --space-16: 64px;
/* ---- Radius ---- */
--radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
--radius-pill: 999px;
/* ---- Type scale ---- */
--text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px;
--text-md: 15px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px;
--text-3xl: 36px; --text-4xl: 46px;
--leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.55;
--weight-normal: 400; --weight-medium: 500; --weight-semibold: 600;
--weight-bold: 700; --weight-black: 800;
--tracking-tight: -0.02em; --tracking-normal: 0;
--tracking-wide: 0.04em; --tracking-caps: 0.08em;
/* ---- Motion + layout ---- */
--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
--dur: 0.16s;
--maxw: 1240px;
--maxw-admin: 1440px;
}