/* ============================================================ Level-Up Cloud Consulting — Design Tokens Inspired by teenage.engineering: restrained, industrial, technical. Near-black ground, warm off-white type, one blue accent, IBM Plex type family throughout. ============================================================ */ :root { /* Tell the UA this is a dark surface so form controls, scrollbars, the caret, the textarea resize grip and autofill styling match the design instead of rendering light-mode chrome over it. */ color-scheme: dark; /* --- Color --- */ --color-bg: #0f0e0f; /* near-black background */ --color-bg-subtle: #181618; /* slightly lifted surface */ --color-fg: #f0eeeb; /* warm off-white — primary text */ --color-muted: #8a8885; /* secondary / caption text */ --color-faint: #7f7d7a; /* subtle text — dimmest tone that still meets WCAG AA on --color-bg */ /* Two accent roles, because one value cannot serve both: #e5461a reads at 4.79:1 as text on --color-bg (AA pass) but only carries white text at 4.02:1 (AA fail). Text keeps the bright tone; solid fills use the darker one so their white label passes. */ --color-accent: #e5461a; /* red-orange — accent TEXT: links, tags, eyebrows */ --color-accent-solid: #c33b15; /* solid FILL carrying white text — 5.31:1 */ --color-accent-solid-hover:#a82f0f; /* hover for solid fills — 6.82:1 */ --color-on-accent: #ffffff; /* label colour on any --color-accent-solid fill */ --color-border: #2a2928; /* dividers, card borders */ --color-border-mid: #3f3d3b; /* slightly more visible border */ /* Feedback colours — form status and field-level validation */ --color-success: #4caf82; /* 7.12:1 on --color-bg */ --color-error: #e05a4e; /* 5.27:1 on --color-bg */ /* --- Typography --- */ --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* --- Fluid type scale --- clamp(min, preferred, max) preferred uses 1vw as the dynamic unit */ --text-xs: clamp(0.65rem, 0.6rem + 0.25vw, 0.75rem); --text-sm: clamp(0.78rem, 0.72rem + 0.3vw, 0.875rem); --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem); --text-md: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); --text-lg: clamp(1.1rem, 0.95rem + 0.75vw, 1.375rem); --text-xl: clamp(1.25rem, 1rem + 1.25vw, 1.75rem); --text-2xl: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); --text-3xl: clamp(2rem, 1.2rem + 4vw, 4.5rem); --text-hero: clamp(2.5rem, 1rem + 6vw, 7rem); /* --- Font weights --- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; /* --- Spacing scale (4px base) --- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* --- Layout --- */ --nav-height: 56px; --max-width: 1200px; --content-width: 780px; --gutter: clamp(1rem, 4vw, 2.5rem); /* --- Borders --- */ --radius-sm: 2px; /* --- Transitions --- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; } /* ============================================================ Light theme Resolution order: 1. data-theme on , if the visitor used the toggle 2. otherwise the system prefers-color-scheme setting 3. otherwise the dark values above Every colour in style.css resolves through these tokens, so overriding them is the whole theme. Ratios are against --color-bg #faf9f7 unless noted. The palette is written twice on purpose. The two rules cannot be combined — one is inside a media query and one is not — and duplicating 13 declarations is cheaper than making every token an indirection or depending on light-dark(), where a browser that lacks it would invalidate every colour at once. KEEP THE TWO BLOCKS IN SYNC. ============================================================ */ /* 1. System preference, only while the visitor has made no explicit choice. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --color-bg: #faf9f7; --color-bg-subtle: #f0eeeb; --color-fg: #171617; /* 17.15:1 */ --color-muted: #5c5a57; /* 6.53:1 */ --color-faint: #6e6c69; /* 4.97:1 — dimmest tone still meeting AA */ /* The bright accent only reaches 3.82:1 on a light ground, so accent TEXT darkens to the same value the solid fill already uses. */ --color-accent: #c33b15; /* 5.04:1 */ /* Solid fills and their white label carry over unchanged: white on #c33b15 is 5.31:1 in either theme. */ /* Borders are deliberately faint in both themes — these match the dark theme's perceptual weight (1.33:1 and 1.78:1) rather than chasing the 3:1 non-text threshold, which applies to UI components and meaningful graphics, not decorative dividers. */ --color-border: #dcd9d5; /* 1.34:1 */ --color-border-mid: #c0bbb5; /* 1.81:1 */ /* The dark theme's feedback colours drop to 2.57:1 and 3.48:1 on a light ground, so both need their own values. */ --color-success: #1a6b47; /* 6.16:1 */ --color-error: #b3241a; /* 6.27:1 */ } } /* 2. Explicit choice from the toggle. Wins over the system setting. */ :root[data-theme="light"] { color-scheme: light; --color-bg: #faf9f7; --color-bg-subtle: #f0eeeb; --color-fg: #171617; --color-muted: #5c5a57; --color-faint: #6e6c69; --color-accent: #c33b15; --color-border: #dcd9d5; --color-border-mid: #c0bbb5; --color-success: #1a6b47; --color-error: #b3241a; } /* Explicit dark needs no overrides — :root already holds the dark values — but it must still set color-scheme so form controls follow when the visitor's system is light and they have chosen dark. */ :root[data-theme="dark"] { color-scheme: dark; }