/* ============================================================================= Prompting TSEC — proposed design tokens Direction: "Werkbank" — a calm, precise, document-grade tool. Every colour, size and radius used by the prototype resolves to a token here. Light is authored on bare :root. Dark redefines the SAME token names twice: once for system preference, once for the explicit toggle. ========================================================================== */ /* ---------- 1. Typefaces (self-hosted, SIL OFL, no third-party requests) ---- */ /* Two subsets per family, exactly as the browser needs them: `latin` covers the Dutch alphabet, `latin-ext` adds the accented forms Dutch and neighbouring languages occasionally require. Splitting them keeps the first-paint payload at ~44 KB (sans + mono, latin only); latin-ext downloads only if a page actually uses one of its glyphs. Serif is used on marketing pages only. */ @font-face { font-family: "Source Sans 3 Var"; src: url("../fonts/source-sans-3-var-latin.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Sans 3 Var"; src: url("../fonts/source-sans-3-var-latin-ext.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Source Serif 4 Var"; src: url("../fonts/source-serif-4-var-latin.woff2") format("woff2-variations"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4 Var"; src: url("../fonts/source-serif-4-var-latin-ext.woff2") format("woff2-variations"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ---------- 2. Type ------------------------------------------------------ */ --font-sans: "Source Sans 3 Var", "Source Sans 3", "Segoe UI", system-ui, sans-serif; --font-serif: "Source Serif 4 Var", "Source Serif 4", Georgia, "Times New Roman", serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace; /* Modular scale, 1.200 minor third, 16px base. Fixed px: this is a dense tool, not an editorial site, and predictable control heights matter more here. */ --text-2xs: 0.6875rem; /* 11 — legal / meta only */ --text-xs: 0.8125rem; /* 13 — helper text, table meta, badges */ --text-sm: 0.875rem; /* 14 — secondary UI, dense labels */ --text-md: 1rem; /* 16 — body, inputs, buttons (never smaller in forms) */ --text-lg: 1.125rem; /* 18 — lead paragraph, card titles */ --text-xl: 1.375rem; /* 22 — section heading (h3) */ --text-2xl: 1.75rem; /* 28 — page heading (h2) */ --text-3xl: 2.25rem; /* 36 — page title (h1), app */ --text-4xl: 3rem; /* 48 — marketing h1 only */ --leading-tight: 1.18; --leading-snug: 1.35; --leading-normal:1.55; --leading-loose: 1.7; /* generated prompt body */ --tracking-tight: -0.015em; /* display sizes only */ --tracking-normal: 0; --tracking-wide: 0.06em; /* small caps eyebrows */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --measure-prose: 68ch; /* reading text */ --measure-form: 46rem; /* one form column — never full-bleed inputs */ /* ---------- 3. Spacing — 4px base, no arbitrary values ------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 — max section rhythm on marketing pages */ /* ---------- 4. Layout ---------------------------------------------------- */ --container-app: 60rem; /* 960 — the wizard/result working column */ --container-site: 72rem; /* 1152 — marketing pages */ --container-narrow: 34rem; /* 544 — auth cards */ --gutter: var(--space-5); --gutter-sm: var(--space-4); /* ---------- 5. Radius — small and consistent, not pill-everything -------- */ --radius-xs: 3px; /* badges, chips */ --radius-sm: 5px; /* inputs, buttons */ --radius-md: 8px; /* cards, panels */ --radius-lg: 12px; /* dialogs only */ --radius-full: 999px; /* reserved: avatar, status dot. Nothing else. */ /* ---------- 6. Borders & elevation --------------------------------------- */ --border-width: 1px; --border-width-strong: 2px; /* Elevation is used sparingly: only for things that genuinely float. */ --shadow-none: none; --shadow-raised: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05); --shadow-overlay: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.08); /* ---------- 7. Motion ---------------------------------------------------- */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 120ms; /* hover, focus, press */ --dur-base: 180ms; /* disclosure, step change */ --dur-slow: 260ms; /* dialog enter */ /* ========================================================================= 8. SEMANTIC COLOUR — LIGHT Paper, not screen-white. Neutrals carry a slight cool cast so the single blue accent never looks like it is fighting a pure-grey ground. ====================================================================== */ color-scheme: light; --bg-page: #F6F7F9; /* app / site ground */ --surface: #FFFFFF; /* primary surface: cards, panels, inputs */ --surface-elevated: #FFFFFF; /* dialogs, popovers (separated by shadow) */ --surface-subtle: #EFF1F4; /* inset wells, table stripes, code ground */ --surface-accent: #ECF2FB; /* selected row, current step, info block */ --text-primary: #14181F; /* 15.9:1 on surface */ --text-secondary: #454C58; /* 8.9:1 on surface */ --text-muted: #5E6674; /* 6.0:1 on surface — never below 4.5 */ --text-inverse: #FFFFFF; --text-on-accent: #FFFFFF; --border: #C7CEDA; /* decorative separators / panel outlines (1.5:1 — exempt) */ --border-subtle: #E4E8EE; /* internal dividers inside a panel */ --border-strong: #7F899B; /* CONTROL borders: 3.5:1 on surface — meets 1.4.11 */ --accent: #1B4D8F; /* 8.4:1 on white — the ONE brand colour */ --accent-hover: #16406F; --accent-active: #102F52; --accent-subtle: #ECF2FB; --accent-border: #B7CDEA; --accent-text: #1B4D8F; /* links, active step number */ --focus-ring: #0B63CE; /* deliberately brighter than --accent so the ring reads against accent-coloured buttons */ --focus-ring-offset: var(--surface); --success: #1F6B45; /* 5.9:1 — muted forest, not neon green */ --success-subtle: #E7F3ED; --success-border: #A8CFBB; --warning: #8A5A0B; /* 5.4:1 — amber that survives on white */ --warning-subtle: #FBF2E0; --warning-border: #E0C489; --error: #A32020; /* 6.5:1 */ --error-subtle: #FBECEC; --error-border: #E2AFAF; --info: #1B4D8F; /* info reuses the accent — one blue only */ --info-subtle: #ECF2FB; --info-border: #B7CDEA; --disabled-bg: #EBEDF1; --disabled-text: #656E7D; /* 4.5:1 on surface, 3.8:1 on disabled-bg (exempt, kept legible) */ --disabled-border: #C9CFD9; --overlay-scrim: rgba(20, 24, 31, 0.44); --selection-bg: #CFE0F5; --selection-text: #14181F; } /* ========================================================================= 9. SEMANTIC COLOUR — DARK Not an inversion. Surfaces step UP in lightness as they come forward (page 16 -> surface 1D -> elevated 24), saturation is pulled back, and the accent is re-picked for dark ground rather than reused from light. ====================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg-page: #14171C; --surface: #1C2027; --surface-elevated: #242932; --surface-subtle: #191D23; --surface-accent: #1B2938; --text-primary: #EEF1F5; /* 13.9:1 on --surface */ --text-secondary: #B9C0CB; /* 8.3:1 */ --text-muted: #949CA9; /* 5.4:1 */ --text-inverse: #14171C; --text-on-accent: #0B121C; /* dark ink on the lighter dark-mode accent */ --border: #424A56; /* decorative (2.0:1 — exempt) */ --border-subtle: #2C323A; --border-strong: #68727F; /* CONTROL borders: 3.4:1 on surface */ --accent: #7FB2EE; /* 7.9:1 on --surface — legible, not neon */ --accent-hover: #9AC4F4; --accent-active: #B7D6F8; --accent-subtle: #1B2938; --accent-border: #4E7093; --accent-text: #8FBDF1; --focus-ring: #7FB2EE; --focus-ring-offset:var(--surface); --success: #6FC095; --success-subtle: #16261E; --success-border: #2F5943; --warning: #E0B063; --warning-subtle: #251E12; --warning-border: #5B4622; --error: #EE8A88; --error-subtle: #2A1818; --error-border: #5E3232; --info: #7FB2EE; --info-subtle: #1B2938; --info-border: #33506F; --disabled-bg: #23272E; --disabled-text: #838B97; --disabled-border: #3A414B; --overlay-scrim: rgba(6, 8, 11, 0.62); --selection-bg: #2B4160; --selection-text: #EEF1F5; /* Shadows do almost no work on dark ground; borders take over. */ --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.36); --shadow-overlay: 0 10px 30px rgba(0, 0, 0, 0.52); } } /* Explicit dark choice must win regardless of system preference. */ :root[data-theme="dark"] { color-scheme: dark; --bg-page: #14171C; --surface: #1C2027; --surface-elevated: #242932; --surface-subtle: #191D23; --surface-accent: #1B2938; --text-primary: #EEF1F5; --text-secondary: #B9C0CB; --text-muted: #949CA9; --text-inverse: #14171C; --text-on-accent: #0B121C; --border: #424A56; /* decorative (2.0:1 — exempt) */ --border-subtle: #2C323A; --border-strong: #68727F; /* CONTROL borders: 3.4:1 on surface */ --accent: #7FB2EE; --accent-hover: #9AC4F4; --accent-active: #B7D6F8; --accent-subtle: #1B2938; --accent-border: #4E7093; --accent-text: #8FBDF1; --focus-ring: #7FB2EE; --focus-ring-offset:var(--surface); --success: #6FC095; --success-subtle: #16261E; --success-border: #2F5943; --warning: #E0B063; --warning-subtle: #251E12; --warning-border: #5B4622; --error: #EE8A88; --error-subtle: #2A1818; --error-border: #5E3232; --info: #7FB2EE; --info-subtle: #1B2938; --info-border: #33506F; --disabled-bg: #23272E; --disabled-text: #838B97; --disabled-border: #3A414B; --overlay-scrim: rgba(6, 8, 11, 0.62); --selection-bg: #2B4160; --selection-text: #EEF1F5; --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.36); --shadow-overlay: 0 10px 30px rgba(0, 0, 0, 0.52); } /* --------------------------------------------------------------------------- Page ground, declared here rather than in the component layer. tokens.css is the FIRST stylesheet on every page, so the correct background exists as soon as it lands. Leaving this to redesign.css (which loads last, after a CDN request) left a white frame on slow connections. -------------------------------------------------------------------------- */ html { background-color: var(--bg-page); } body { background-color: var(--bg-page); color: var(--text-primary); }