/* ============================================================ USIDM — Design Tokens · FROZEN (Phase 2) Colour values sampled from the approved crest. No colour, size, or spacing value may appear outside this file. ============================================================ */ :root { /* ---- BRAND CORE — sampled from the approved crest ---- */ --usidm-crimson: #60010E; /* shield field, exact */ --usidm-navy: #000A2B; /* wordmark navy, exact */ --usidm-gold: #E1BA66; /* torch flame, exact */ /* ---- CRIMSON RAMP ---- */ --crimson-900: #3E000A; --crimson-800: #60010E; --crimson-700: #7A0F1C; --crimson-600: #93202E; --crimson-100: #F2E4E6; --crimson-050: #FAF3F4; /* ---- NAVY RAMP ---- */ --navy-900: #000A2B; --navy-800: #0A1633; --navy-700: #16233F; --navy-600: #24324F; --navy-200: #C3C8D3; --navy-100: #E4E7ED; --navy-050: #F2F4F7; /* ---- GOLD RAMP ---- #E1BA66 is 1.75:1 on ivory. Decoration only — never type on light. */ --gold-400: #E1BA66; --gold-600: #B08D4F; --gold-text: #8A6A22; /* 4.79:1 — the only gold for type on light */ /* ---- NEUTRALS ---- */ --white: #FFFFFF; --ivory: #FBF9F5; --paper: #FFFFFF; --ink: var(--navy-800); --ink-muted: #4A5468; /* 7.24:1 */ --ink-subtle: #5A6478; /* 5.66:1 */ --rule: rgba(0, 10, 43, 0.12); --rule-strong: rgba(0, 10, 43, 0.22); /* ---- SEMANTIC SURFACES & TEXT ---- Components reference these, never the ramps directly. */ --text-primary: var(--ink); --text-secondary: var(--ink-muted); --text-tertiary: var(--ink-subtle); --text-on-dark: var(--white); --text-on-dark-muted: rgba(255, 255, 255, 0.88); --text-on-dark-soft: rgba(255, 255, 255, 0.72); --text-on-dark-faint: rgba(255, 255, 255, 0.55); --text-on-crimson: rgba(255, 255, 255, 0.90); --surface-primary: var(--ivory); --surface-panel: var(--paper); --surface-inverse: var(--navy-900); --surface-accent: var(--crimson-800); --surface-hover: rgba(0, 10, 43, 0.03); --border-default: var(--rule); --border-strong: var(--rule-strong); --border-inverse: rgba(255, 255, 255, 0.14); --border-on-dark: rgba(255, 255, 255, 0.28); --link: var(--crimson-700); --link-hover: var(--crimson-900); --link-underline: rgba(122, 15, 28, 0.35); --link-on-dark: var(--gold-400); --link-underline-dark: rgba(225, 186, 102, 0.40); /* ---- STATUS ---- Fixed now so forms, alerts and future portal components cannot invent their own reds and greens later. */ --danger: #8A1522; /* 9.03:1 on ivory */ --success: #1F6B4F; /* 6.10:1 */ --warning: #8A5B00; /* 5.58:1 */ /* ---- EVIDENCE TAXONOMY ---- Mirrors the research specification: VERIFIED / INFERENCE / UNKNOWN / HYPOTHESIS. Public market intelligence must show the difference between fact and analysis. */ --evidence-verified-bg: var(--navy-050); --evidence-verified-fg: var(--navy-700); --evidence-verified-edge: var(--gold-600); --evidence-inference-bg: var(--crimson-050); --evidence-inference-fg: var(--crimson-700); --evidence-inference-edge: var(--crimson-600); --evidence-unknown-bg: #F4F4F3; --evidence-unknown-fg: var(--ink-subtle); --evidence-unknown-edge: var(--navy-200); --evidence-hypothesis-bg: #F6F2E9; --evidence-hypothesis-fg: var(--gold-text); --evidence-hypothesis-edge:var(--gold-400); /* ---- TYPOGRAPHY — FROZEN: Spectral + Inter ---- Weights in use: Spectral 400/500/600 · Inter 400/500/600. Spectral 500 carries major headings; 400 for editorial and large narrative. 600 used sparingly — the crest already supplies the visual authority. */ --font-display: 'Spectral', Georgia, serif; --font-ui: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; --display-weight: 500; --fs-eyebrow: 0.6875rem; --fs-caption: 0.8125rem; --fs-small: 0.9375rem; --fs-body: 1.0625rem; --fs-lead: 1.25rem; --fs-h4: 1.375rem; --fs-h3: 1.75rem; --fs-h2: 2.25rem; --fs-h1: 3rem; --fs-display: 3.75rem; --lh-tight: 1.12; --lh-heading: 1.2; --lh-body: 1.65; --lh-relaxed: 1.75; --ls-eyebrow: 0.16em; --ls-display: -0.021em; --ls-heading: -0.013em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* ---- SPACE — 4px base ---- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6.5rem; --s-12: 8rem; --section-y: var(--s-11); --section-y-tight: var(--s-9); /* ---- LAYOUT ---- */ --measure: 68ch; --container: 1200px; --container-narrow: 860px; --container-wide: 1360px; /* data-heavy layouts only */ --gutter: var(--s-5); --grid-cols: 12; --grid-gap: var(--s-5); --nav-height: 78px; /* ---- BORDER & ELEVATION — flat by default ---- */ --radius-none: 0; --radius-sm: 2px; --radius-md: 3px; --border-hairline: 1px; --border-rule: 2px; --shadow-none: none; --shadow-raised: 0 1px 2px rgba(0, 10, 43, 0.06), 0 4px 12px rgba(0, 10, 43, 0.05); /* ---- GLASS — student-facing surfaces ONLY ---- Owner amendment 2026-08-18 (docs/dual-audience-design-principle.md §3). Institutional surfaces stay solid. Surface is ivory at 0.85: over a worst-case near-black frame the blend is ~#E2E1DF, which holds 5.1:1 for --text-secondary and 12:1 for --text-primary. --gold-text does NOT survive that blend (3.8:1) — gold stays decoration-only on glass, same as on light. */ --glass-surface: rgba(251, 249, 245, 0.85); --glass-border: rgba(255, 255, 255, 0.45); --glass-blur: 18px; --shadow-glass: 0 1px 3px rgba(0, 10, 43, 0.07), 0 10px 30px rgba(0, 10, 43, 0.10); /* ---- MOTION ---- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 120ms; --dur-base: 200ms; /* ---- FOCUS ---- */ --focus-ring: 2px solid var(--crimson-700); --focus-ring-dark: 2px solid var(--gold-400); --focus-offset: 3px; } /* ---- ARABIC (Phase 2.1) ---- Spectral has no Arabic. Rendering Arabic through the Latin stack falls back to a system font — invisible to a non-reader, obvious to the audience. Noto Naskh Arabic carries display: institutional naskh, calm rather than literary, high legibility at large sizes. IBM Plex Sans Arabic carries UI: drawn to pair with a Latin neo-grotesque, so it matches Inter's proportions. Scoped to [lang="ar"]. No token above changes value. */ [lang="ar"] { --font-display: 'Noto Naskh Arabic', 'Amiri', serif; --font-ui: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif; /* Arabic sets optically smaller than Latin at an identical font-size, and naskh needs more room for its ascenders and descenders. */ --fs-body: 1.125rem; --fs-small: 1rem; --fs-caption: 0.875rem; --fs-eyebrow: 0.8125rem; --lh-body: 1.85; --lh-relaxed: 1.95; --lh-heading: 1.45; --lh-tight: 1.35; /* Letter-spacing breaks the joins on connected script. This is a defect, not a style — neutralised, never merely reduced. */ --ls-eyebrow: 0; --ls-display: 0; --ls-heading: 0; /* Spectral 500 carries headings in Latin; naskh reads heavy at 500. */ --display-weight: 400; } @media (max-width: 860px) { [lang="ar"] { --fs-body: 1.0625rem; --fs-small: 0.9375rem; } } /* ---- ZONES ---- */ [data-zone="institutions"] { --section-y: var(--s-11); /* 104px */ --accent: var(--crimson-800); } [data-zone="students"] { --section-y: var(--s-9); /* 64px */ --accent: var(--crimson-700); --ivory: #FCFAF6; --radius-md: 6px; --lh-body: var(--lh-relaxed); } /* ---- RESPONSIVE ---- Section rhythm is declared per zone so the institutional / student distinction survives at mobile widths. */ @media (max-width: 860px) { :root { --fs-display: 2.5rem; --fs-h1: 2.125rem; --fs-h2: 1.6875rem; --fs-h3: 1.375rem; --fs-body: 1rem; --gutter: var(--s-4); --nav-height: 64px; } [data-zone="institutions"] { --section-y: var(--s-8); } [data-zone="students"] { --section-y: var(--s-7); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }