/* ============================================================================ tokens.css — THE single source of truth for the CatalyseR ERP design tokens. (CLAUDE.md Rule 1.) Every colour, font, font-size, spacing and radius is defined here ONCE; everywhere else reference them with var(--token). Never write a raw hex / font / size in any other CSS file or inline style. Values reproduce the existing project palette exactly (previously duplicated across the 4 portal headers + catalyser-ui.css + form_design.css), plus canonical names for the colour families that were being written several slightly-different ways (brand/blue/green/amber/red/grey). NOTE: per-institute brand theming still injects --brand at runtime inline on (includes/theme.php / student_brand.php); that inline value wins over the default below, so theming is unaffected. ========================================================================== */ :root{ /* ── Brand (primary navy) ─────────────────────────────────────────────── */ --brand:#1e3a6e; --brand-hover:#162d57; --brand-light:#e8eef8; --brand-dark:#1e3a8a; /* ── Accent blue family (royal blues used across KPI cards / links) ────── */ --blue:#1d4ed8; /* primary accent blue */ --blue-strong:#1e40af; /* hover / heavier blue */ --blue-bright:#3b82f6; /* lighter blue */ --blue-600:#2563eb; --blue-50:#eff6ff; /* very light blue tint */ --blue-100:#dbeafe; /* light blue chip background */ /* ── Accent orange ────────────────────────────────────────────────────── */ --accent:#f97316; /* ── Status: green ────────────────────────────────────────────────────── */ --green:#059669; /* primary green (emerald) */ --green-bright:#16a34a; /* brighter success green */ --green-dark:#065f46; /* deep green text */ --green-700:#166534; --green-50:#dcfce7; /* light green chip */ --green-light:#ecfdf5; /* lightest green surface */ /* ── Status: amber ────────────────────────────────────────────────────── */ --amber:#d97706; --amber-bright:#f59e0b; --amber-text:#92400e; /* dark amber text on light bg */ --amber-50:#fef3c7; /* light amber chip */ --amber-light:#fffbeb; /* lightest amber surface */ /* ── Status: red ──────────────────────────────────────────────────────── */ --red:#dc2626; --red-strong:#991b1b; /* dark red text */ --red-50:#fef2f2; /* light red surface (= --red-light) */ --red-100:#fee2e2; /* red chip background */ --red-light:#fef2f2; /* ── Accent: violet ───────────────────────────────────────────────────── */ --violet:#7c3aed; /* ── Neutral slate scale ──────────────────────────────────────────────── */ --white:#fff; --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1; --gray-400:#94a3b8; --gray-500:#64748b; --gray-600:#475569; --gray-700:#334155; --gray-800:#1e293b; --gray-900:#0f172a; --ink:#0f172a; /* default darkest text (= gray-900) */ --page-bg:#f4f6fb; /* ── Sidebar (dark navy chrome) ───────────────────────────────────────── */ --sb-bg:#0f2c5c; --sb-bg2:#0a2148; --sb-border:rgba(255,255,255,.08); --sb-text:rgba(255,255,255,.82); --sb-muted:rgba(255,255,255,.40); /* ── Typography ───────────────────────────────────────────────────────── */ --font:'Poppins',sans-serif; /* the ONE project font */ --font-mono:ui-monospace,Menlo,Consolas,monospace; /* canonical mono stack */ --font-serif:'Times New Roman',Times,serif; /* question content (Question Bank) — printed-module look */ /* Type scale (px) — use instead of raw font-size values */ --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-30:30px; /* ── Radii ────────────────────────────────────────────────────────────── */ --radius:6px; --radius-lg:10px; --radius-xl:14px; --radius-pill:999px; /* ── Spacing scale ────────────────────────────────────────────────────── */ --sp-2:2px; --sp-4:4px; --sp-6:6px; --sp-8:8px; --sp-10:10px; --sp-12:12px; --sp-14:14px; --sp-16:16px; --sp-20:20px; --sp-24:24px; /* ── Shadows ──────────────────────────────────────────────────────────── */ --shadow-sm:0 1px 3px rgba(0,0,0,.06); --shadow:0 4px 6px -1px rgba(0,0,0,.08); --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1); /* ── Layout metrics ───────────────────────────────────────────────────── */ --sw:240px; /* sidebar width */ --swc:54px; /* sidebar collapsed width */ --th:54px; /* topbar height */ }