/* =========================================================================== SELF-HOSTED FONTS (no external CDN call) Drop the licensed IBM Plex woff2 files into production/fonts/ to match the design exactly. Until then the system stack below renders cleanly offline. =========================================================================== */ /* NB: no local() — always use the bundled woff2 so a broken/variable IBM Plex installed on a visitor's machine can't be picked up by Chrome/Edge (which collapses spaces and stacks combining marks). Bundled file is the source of truth. */ @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/IBMPlexSans-Medium.woff2") format("woff2");} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2");} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/IBMPlexSans-Bold.woff2") format("woff2");} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");} /* =========================================================================== CORTEX — Design Tokens Foundation layer: colour, type, spacing, grid, radius, elevation. Palette inherited from the TMP-informed Corporate Visual Style Addendum. All combinations checked toward WCAG 2.2 AA. Red/amber are emphasis only, never the sole carrier of meaning. =========================================================================== */ :root { /* --- Core palette ----------------------------------------------------- */ --navy: #0F2747; /* primary structure, headings, dark panels */ --navy-700: #163357; /* hover / layered navy */ --navy-900: #0A1C34; /* deepest panel / footer base */ --charcoal: #24272A; /* serious neutral contrast */ --ink: #1E1E1E; /* main body text */ --slate: #5B6470; /* secondary text, captions (5.8:1 on white) */ --slate-600: #46505C; /* stronger secondary text */ --pale: #D9E5F2; /* panels, card surfaces, diagram fills */ --pale-line: #C2D2E6; /* hairlines on pale fields */ --page: #F3F6FA; /* section backgrounds, breathing room */ --white: #FFFFFF; /* --- Accents (disciplined) ------------------------------------------- */ --amber: #F1AC30; /* stage markers, decision points, highlights */ --amber-warm: #D97904; /* stronger warmth where needed (AA on white) */ --red: #F00001; /* sparse emphasis only — never alarm */ --red-ink: #C20002; /* red used as text on light (>=4.5:1) */ /* --- Semantic surface tokens (re-pointed by direction themes) --------- */ --bg-page: var(--page); --bg-surface: var(--white); --bg-panel: var(--pale); --bg-invert: var(--navy); --text-strong: var(--navy); --text-body: var(--ink); --text-muted: var(--slate); --text-on-invert: #EAF1FA; --text-on-invert-muted: #A9BCD4; --line: #DBE2EC; /* default hairline on light */ --line-strong: #C2D2E6; --focus: #1A4D8F; /* visible focus ring colour */ --accent-stage: var(--amber); /* --- Typography ------------------------------------------------------- */ --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: var(--font-sans); --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Fluid type scale — base 18px for senior readers */ --fs-display: clamp(2.4rem, 1.6rem + 3.4vw, 4rem); /* hero H1 */ --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 3rem); --fs-h2: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem); --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); --fs-h4: 1.125rem; --fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem); --fs-body: 1.125rem; /* 18px */ --fs-small: 1rem; /* 16px */ --fs-caption: 0.875rem; /* 14px */ --fs-kicker: 0.8125rem; /* 13px overline */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.65; --tracking-kicker: 0.13em; --tracking-tight: -0.01em; /* --- Spacing scale (4pt base) ---------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* Section rhythm */ --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); /* --- Layout ----------------------------------------------------------- */ --maxw: 1200px; --maxw-prose: 68ch; --gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem); /* --- Radius ----------------------------------------------------------- */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-pill: 999px; /* --- Elevation (restrained — corporate, not floaty) ------------------- */ --sh-sm: 0 1px 2px rgba(15, 39, 71, 0.06); --sh-md: 0 2px 6px rgba(15, 39, 71, 0.08), 0 1px 2px rgba(15, 39, 71, 0.05); --sh-lg: 0 10px 30px rgba(15, 39, 71, 0.12); /* --- Card treatment knobs (re-pointed per direction) ------------------ */ --card-bg: var(--white); --card-border: 1px solid var(--line); --card-shadow: var(--sh-md); --card-radius: var(--r-md); --card-accent-display: block; /* top accent rule on cards */ --hero-bg: var(--page); --hero-text: var(--navy); --hero-muted: var(--slate); --hero-diagram-bg: var(--white); } /* =========================================================================== FONT THEMES — driven by [data-font] on =========================================================================== */ :root[data-font="archivo"] { --font-sans: "Archivo", system-ui, -apple-system, sans-serif; } :root[data-font="public"] { --font-sans: "Public Sans", system-ui, -apple-system, sans-serif; } /* =========================================================================== DIRECTION THEMES — driven by [data-direction] on A. institute — light, spacious, AISI-like; navy as hairline + footer only B. boardroom — navy-led TMP corporate; dark hero, filled cards, stage amber C. operational — hybrid (default); light with navy punctuation, soft cards =========================================================================== */ /* ---- C. OPERATIONAL (default) ---- */ :root, :root[data-direction="operational"] { --card-bg: var(--white); --card-border: 1px solid var(--line); --card-shadow: var(--sh-md); --card-accent-display: block; --hero-bg: var(--page); --hero-text: var(--navy); --hero-muted: var(--slate); --hero-diagram-bg: var(--white); } /* ---- A. INSTITUTE ---- */ :root[data-direction="institute"] { --bg-page: #FBFCFE; --bg-surface: #FBFCFE; --card-bg: transparent; --card-border: 1px solid var(--line-strong); --card-shadow: none; --card-radius: 4px; --card-accent-display: none; --section-y: clamp(4rem, 3rem + 5vw, 8rem); --hero-bg: #FBFCFE; --hero-text: var(--navy); --hero-muted: var(--slate-600); --hero-diagram-bg: #FBFCFE; } /* ---- B. BOARDROOM ---- */ :root[data-direction="boardroom"] { --card-bg: var(--white); --card-border: 1px solid transparent; --card-shadow: var(--sh-md); --card-radius: 6px; --card-accent-display: block; --hero-bg: var(--navy); --hero-text: #FFFFFF; --hero-muted: var(--text-on-invert-muted); --hero-diagram-bg: var(--navy-700); } /* =========================================================================== ACCENT DISCIPLINE — [data-accent] amber-red (default): amber for stages + rare red for the ungoverned path amber-only: no red anywhere =========================================================================== */ :root, :root[data-accent="amber-red"] { --warn: var(--red-ink); --warn-strong: var(--red); } :root[data-accent="amber-only"] { --warn: var(--amber-warm); --warn-strong: var(--amber-warm); }