/* ===================================================================== webtools.co — Design Tokens --------------------------------------------------------------------- Single source of truth for color, type, space, radius, shadow, motion. Load BEFORE bootstrap overrides and before /assets/css/styles.css. Theme model (three states): 1. bare :root → light palette (default) 2. @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) → dark palette when the OS is dark 3. :root[data-theme="dark"] → dark palette when the site/user says so Phase 1 of the site rollout sets explicitly so nothing auto-flips until a toggle ships. Remove that attribute to enable OS-following dark mode. Naming: --wt-* are brand tokens. --bs-* remaps at the bottom re-skin Bootstrap 5 so the ~9,750 programmatic pages pick up the identity before any markup is touched. ===================================================================== */ :root { color-scheme: light; /* ---- Ink scale (navy-biased neutrals) ----------------------------- */ --wt-ink-950: #0E1526; /* display headings, hero numbers */ --wt-ink-800: #1C2745; /* brand ink: primary buttons, links, mark */ --wt-ink-700: #2B3556; /* secondary ink, chart default series */ --wt-ink-600: #47506E; /* body text */ --wt-ink-500: #626C87; /* muted text, captions (5.3:1 white, 4.6:1 paper-3) */ --wt-ink-400: #8F98B0; /* placeholders, disabled text */ --wt-ink-300: #B9C0D2; /* strong borders, icons at rest */ --wt-ink-200: #DDE1EA; /* borders */ --wt-ink-100: #EEF0F5; /* hairlines, tinted fills */ /* ---- Paper (surfaces) --------------------------------------------- */ --wt-paper: #FFFFFF; /* page ground */ --wt-paper-2: #F6F7FA; /* tinted band, table header, code bg */ --wt-paper-3: #EEF0F5; /* pressed / selected fill */ --wt-paper-inverse: #0E1526; /* dark blocks on a light page (footer) */ /* ---- Signal (the one accent) -------------------------------------- */ /* Amber highlighter. Used for: the second slash of the mark, the highlighted row/bar (the thing the reader is looking at), key-number underlines, focus rings. NEVER for body text, never as a button fill. */ --wt-signal: #E59A00; --wt-signal-soft: #FFF3CC; /* highlight background */ --wt-signal-ink: #7A5200; /* text on signal-soft (7.3:1) */ /* ---- Status (reserved; never reused as series colors) ------------- */ --wt-good: #1B8A5A; --wt-good-soft: #E3F5EC; --wt-good-ink: #0F5C3B; --wt-warn: #B85C12; --wt-warn-soft: #FBEADB; --wt-warn-ink: #7A3B08; --wt-bad: #C0392B; --wt-bad-soft: #FBE5E2; --wt-bad-ink: #7F241B; /* ---- Data viz ----------------------------------------------------- */ /* Default chart: single hue (ink) ordered by magnitude; the platform / row in focus is painted --wt-viz-focus. Validated categorical set for the rare multi-series case (budget allocator, multi-line trends). Light set passes CVD ΔE ≥ 8 adjacent & normal-vision ≥ 15. Slot 2 is < 3:1 on white → always pair with visible labels (our tables do). */ --wt-viz-base: var(--wt-ink-700); --wt-viz-base-2: var(--wt-ink-300); --wt-viz-focus: var(--wt-signal); --wt-viz-grid: var(--wt-ink-100); --wt-viz-1: #3A5BD9; /* cobalt */ --wt-viz-2: #E59A00; /* amber */ --wt-viz-3: #159E8A; /* teal */ --wt-viz-4: #D9573B; /* coral */ --wt-viz-5: #7C5CD6; /* violet */ --wt-viz-6: #C24B8F; /* magenta */ /* ---- Typography --------------------------------------------------- */ --wt-font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --wt-font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --wt-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type scale (rem). UI base 15px; reading base 17px. */ --wt-text-2xs: 0.6875rem; /* 11 — eyebrows, table units */ --wt-text-xs: 0.75rem; /* 12 */ --wt-text-sm: 0.8125rem; /* 13 — table body, captions */ --wt-text-ui: 0.9375rem; /* 15 — UI default */ --wt-text-md: 1.0625rem; /* 17 — reading body */ --wt-text-lg: 1.25rem; /* 20 — lead, h4 */ --wt-text-xl: 1.5rem; /* 24 — h3 */ --wt-text-2xl: 1.875rem; /* 30 — h2 */ --wt-text-3xl: 2.375rem; /* 38 — h1 (interior) */ --wt-text-4xl: 3rem; /* 48 — hero h1 */ --wt-text-5xl: 3.75rem; /* 60 — hero numbers */ --wt-leading-tight: 1.1; --wt-leading-snug: 1.25; --wt-leading-ui: 1.45; --wt-leading-body: 1.65; --wt-tracking-tight: -0.02em; --wt-tracking-caps: 0.08em; /* ---- Space (4px base) --------------------------------------------- */ --wt-space-1: 0.25rem; --wt-space-2: 0.5rem; --wt-space-3: 0.75rem; --wt-space-4: 1rem; --wt-space-5: 1.5rem; --wt-space-6: 2rem; --wt-space-7: 3rem; --wt-space-8: 4rem; --wt-space-9: 6rem; /* ---- Layout ------------------------------------------------------- */ --wt-container: 1200px; /* site max */ --wt-measure: 44rem; /* ~70ch reading measure for articles */ --wt-gutter: clamp(1rem, 4vw, 2rem); /* ---- Radius ------------------------------------------------------- */ --wt-radius-sm: 4px; /* chips, code, table cells */ --wt-radius-md: 8px; /* inputs, buttons, tiles */ --wt-radius-lg: 12px; /* large modules (calculator, hero panel) */ --wt-radius-pill: 999px; /* ---- Elevation (used sparingly) ----------------------------------- */ --wt-shadow-1: 0 1px 2px rgba(14, 21, 38, 0.06); --wt-shadow-2: 0 8px 24px -8px rgba(14, 21, 38, 0.18); --wt-ring: 0 0 0 3px rgba(229, 154, 0, 0.35); /* focus ring (signal) */ /* ---- Motion ------------------------------------------------------- */ --wt-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --wt-duration: 160ms; } /* ---- Dark palette --------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --wt-ink-950: #F4F6FA; --wt-ink-800: #E6EAF2; --wt-ink-700: #C9CFDD; --wt-ink-600: #B4BCCE; --wt-ink-500: #8F98B0; --wt-ink-400: #6B7590; --wt-ink-300: #3E4863; --wt-ink-200: #2A334A; --wt-ink-100: #1F2740; --wt-paper: #0F1525; --wt-paper-2: #151C2F; --wt-paper-3: #1C2438; --wt-paper-inverse: #F4F6FA; --wt-signal: #F5B733; --wt-signal-soft: #3A2E0C; --wt-signal-ink: #FFD98A; --wt-good: #3DBE85; --wt-good-soft: #10301F; --wt-good-ink: #9FE3C4; --wt-warn: #E58A3A; --wt-warn-soft: #3A2410; --wt-warn-ink: #F6C79E; --wt-bad: #E4685B; --wt-bad-soft: #3B1815; --wt-bad-ink: #F4B3AC; --wt-viz-base: #8F98B0; --wt-viz-base-2: #3E4863; --wt-viz-grid: #1F2740; --wt-viz-1: #5F7DF0; --wt-viz-2: #C48508; --wt-viz-3: #22A892; --wt-viz-4: #E8664A; --wt-viz-5: #9678F0; --wt-viz-6: #D45C9E; --wt-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --wt-shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.6); --wt-ring: 0 0 0 3px rgba(245, 183, 51, 0.4); } } :root[data-theme="dark"] { color-scheme: dark; --wt-ink-950: #F4F6FA; --wt-ink-800: #E6EAF2; --wt-ink-700: #C9CFDD; --wt-ink-600: #B4BCCE; --wt-ink-500: #8F98B0; --wt-ink-400: #6B7590; --wt-ink-300: #3E4863; --wt-ink-200: #2A334A; --wt-ink-100: #1F2740; --wt-paper: #0F1525; --wt-paper-2: #151C2F; --wt-paper-3: #1C2438; --wt-paper-inverse: #F4F6FA; --wt-signal: #F5B733; --wt-signal-soft: #3A2E0C; --wt-signal-ink: #FFD98A; --wt-good: #3DBE85; --wt-good-soft: #10301F; --wt-good-ink: #9FE3C4; --wt-warn: #E58A3A; --wt-warn-soft: #3A2410; --wt-warn-ink: #F6C79E; --wt-bad: #E4685B; --wt-bad-soft: #3B1815; --wt-bad-ink: #F4B3AC; --wt-viz-base: #8F98B0; --wt-viz-base-2: #3E4863; --wt-viz-grid: #1F2740; --wt-viz-1: #5F7DF0; --wt-viz-2: #C48508; --wt-viz-3: #22A892; --wt-viz-4: #E8664A; --wt-viz-5: #9678F0; --wt-viz-6: #D45C9E; --wt-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --wt-shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.6); --wt-ring: 0 0 0 3px rgba(245, 183, 51, 0.4); } /* ===================================================================== Bootstrap 5.3 remap — re-skins every Bootstrap component to the brand. Keep this block even after markup migration; it is the safety net for any Bootstrap class that survives. ===================================================================== */ :root { --bs-body-font-family: var(--wt-font-body); --bs-body-font-size: var(--wt-text-ui); --bs-body-line-height: var(--wt-leading-ui); --bs-body-color: var(--wt-ink-600); --bs-body-bg: var(--wt-paper); --bs-heading-color: var(--wt-ink-950); --bs-emphasis-color: var(--wt-ink-950); --bs-secondary-color: var(--wt-ink-500); --bs-tertiary-bg: var(--wt-paper-2); --bs-secondary-bg: var(--wt-paper-3); --bs-border-color: var(--wt-ink-200); --bs-border-radius: var(--wt-radius-md); --bs-border-radius-sm: var(--wt-radius-sm); --bs-border-radius-lg: var(--wt-radius-lg); --bs-link-color: var(--wt-ink-800); --bs-link-hover-color: var(--wt-ink-950); --bs-link-color-rgb: 28, 39, 69; --bs-link-hover-color-rgb: 14, 21, 38; --bs-primary: var(--wt-ink-800); --bs-primary-rgb: 28, 39, 69; --bs-secondary: var(--wt-ink-500); --bs-secondary-rgb: 98, 108, 135; --bs-success: var(--wt-good); --bs-warning: var(--wt-warn); --bs-danger: var(--wt-bad); --bs-info: var(--wt-ink-700); --bs-light: var(--wt-paper-2); --bs-dark: var(--wt-ink-950); --bs-font-monospace: var(--wt-font-mono); --bs-code-color: var(--wt-ink-800); } .btn-primary { --bs-btn-bg: var(--wt-ink-800); --bs-btn-border-color: var(--wt-ink-800); --bs-btn-color: var(--wt-paper); --bs-btn-hover-bg: var(--wt-ink-950); --bs-btn-hover-border-color: var(--wt-ink-950); --bs-btn-hover-color: var(--wt-paper); --bs-btn-active-bg: var(--wt-ink-950); --bs-btn-active-border-color: var(--wt-ink-950); --bs-btn-focus-shadow-rgb: 229, 154, 0; } .btn-outline-primary { --bs-btn-color: var(--wt-ink-800); --bs-btn-border-color: var(--wt-ink-300); --bs-btn-hover-bg: var(--wt-paper-3); --bs-btn-hover-border-color: var(--wt-ink-800); --bs-btn-hover-color: var(--wt-ink-950); --bs-btn-active-bg: var(--wt-ink-800); --bs-btn-active-border-color: var(--wt-ink-800); --bs-btn-focus-shadow-rgb: 229, 154, 0; } .btn-light, .btn-outline-light { --bs-btn-focus-shadow-rgb: 229, 154, 0; } .badge.bg-primary { background-color: var(--wt-ink-800) !important; } .badge.bg-secondary { background-color: var(--wt-ink-500) !important; } .table { --bs-table-bg: transparent; --bs-table-border-color: var(--wt-ink-200); --bs-table-color: var(--wt-ink-600); } .table-light { --bs-table-bg: var(--wt-paper-2); --bs-table-color: var(--wt-ink-500); } .alert-info { --bs-alert-bg: var(--wt-paper-2); --bs-alert-border-color: var(--wt-ink-200); --bs-alert-color: var(--wt-ink-600); } .alert-warning { --bs-alert-bg: var(--wt-warn-soft); --bs-alert-border-color: var(--wt-warn); --bs-alert-color: var(--wt-warn-ink); } .form-control, .form-select { border-color: var(--wt-ink-200); color: var(--wt-ink-950); background-color: var(--wt-paper); font-variant-numeric: tabular-nums; } .form-control:focus, .form-select:focus { border-color: var(--wt-ink-800); box-shadow: var(--wt-ring); } .breadcrumb { --bs-breadcrumb-divider-color: var(--wt-ink-300); font-size: var(--wt-text-sm); } .dropdown-menu { --bs-dropdown-border-color: var(--wt-ink-200); --bs-dropdown-bg: var(--wt-paper); box-shadow: var(--wt-shadow-2); } .dropdown-item.active, .dropdown-item:active { background-color: var(--wt-ink-800); } /* ===================================================================== Legacy aliases (Phase 0–6). styles.css and page CSS still use these names. They resolve to --wt-* so the site picks up the new palette before markup migrates. Phase 7 deletes this block. ===================================================================== */ :root { --font-family-base: var(--wt-font-body); --color-primary: var(--wt-ink-800); --color-secondary: var(--wt-ink-500); --color-background: var(--wt-paper-2); --color-text: var(--wt-ink-600); --color-text-muted: var(--wt-ink-500); --color-border: var(--wt-ink-200); --color-shadow: rgba(14, 21, 38, 0.10); --transition-base: color var(--wt-duration) var(--wt-ease), background-color var(--wt-duration) var(--wt-ease), border-color var(--wt-duration) var(--wt-ease), box-shadow var(--wt-duration) var(--wt-ease); }