/* ========================================================================== DARK STUDIO — design tokens Ross Langston · v1.0 Dark is the default. Light is opt-in via [data-theme="light"] on , matching the Planning Hub pattern: light -> document.documentElement.setAttribute('data-theme','light') dark -> document.documentElement.removeAttribute('data-theme') Fonts (add to before this file): ========================================================================== */ /* -------------------------------------------------------------------------- 1. MODE-INDEPENDENT TOKENS Type, spacing, radius, motion. These never change between modes. -------------------------------------------------------------------------- */ :root { /* --- Type families ----------------------------------------------------- Three families, three roles. Never mix the roles up. display : Oswald, ALWAYS uppercase, headings only, never body copy body : IBM Plex Sans, all prose mono : IBM Plex Mono, every label, eyebrow, tag, metric and datum */ --font-display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif; --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* --- Type scale -------------------------------------------------------- clamp() gives the mobile step automatically: the first value is the 380px size, the last is the desktop size. No media queries needed. */ --fs-display-1: clamp(2.125rem, 1.45rem + 3.4vw, 3.75rem); /* 34 -> 60 */ --fs-display-2: clamp(1.625rem, 1.25rem + 1.9vw, 2.5rem); /* 26 -> 40 */ --fs-display-3: clamp(1.25rem, 1.09rem + 0.8vw, 1.625rem); /* 20 -> 26 */ --fs-display-4: 1.0625rem; /* 17, card titles */ --fs-body-lead: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); /* 15 -> 17 */ --fs-body: 0.9375rem; /* 15 */ --fs-body-sm: 0.8125rem; /* 13 */ --fs-mono-label: 0.6875rem; /* 11, eyebrows and tags */ --fs-mono-meta: 0.75rem; /* 12, inline metadata */ --fs-metric: clamp(2rem, 1.6rem + 2vw, 3rem); /* big Oswald numerals */ /* --- Line height ------------------------------------------------------- Display is set tight because it's uppercase condensed; body is loose because Plex Sans at light weights needs air to stay readable. */ --lh-display: 1.08; --lh-heading: 1.25; --lh-body: 1.7; --lh-tight: 1.45; /* --- Letter spacing ---------------------------------------------------- The wide mono tracking is the system's signature. Don't reduce it. */ --ls-display: 0.01em; --ls-mono: 0.22em; --ls-mono-sm: 0.14em; /* --- Weights ----------------------------------------------------------- --weight-body flips per mode. Light type on dark optically thickens, so 300 reads correctly there and looks anaemic on a light ground. */ --weight-display: 400; --weight-display-strong: 500; --weight-mono: 400; /* --- Spacing (4px base) ------------------------------------------------ */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ --sp-9: 6rem; /* 96 */ --sp-10: 8rem; /* 128 */ /* Section rhythm — the vertical gap between page sections */ --sp-section: clamp(3rem, 2rem + 5vw, 6rem); --sp-gutter: clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem); /* --- Layout ------------------------------------------------------------ */ --measure: 68ch; /* max prose width */ --width-page: 1180px; --width-narrow: 760px; /* --- Radius ------------------------------------------------------------ Deliberately small. Big radii soften the system's editorial feel. */ --radius-sm: 3px; --radius: 6px; --radius-lg: 10px; --radius-pill: 999px; /* --- Motion ------------------------------------------------------------ */ --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; --ease: cubic-bezier(0.2, 0, 0.1, 1); /* --- Grain ------------------------------------------------------------- 4% opacity texture over everything. Blend mode flips per mode. */ --grain-opacity: 0.04; } /* -------------------------------------------------------------------------- 2. DARK MODE (default) Four-level near-black stack. Every ground carries a warm cast — there is no neutral grey anywhere in this system. -------------------------------------------------------------------------- */ :root { --ground: #0D0B0B; /* page */ --surface-1: #141110; /* recessed bands, footer */ --surface-2: #161312; /* cards */ --surface-3: #1C1817; /* raised / hover */ --border: #241F1E; --border-strong: #332B29; --ink: #EFE9E3; /* primary text */ --ink-muted: #9A8F88; /* body copy, 5.9:1 on --ground */ --ink-faint: #6E645E; /* metadata, disabled */ /* Ember — ACTION only. CTAs, links, section eyebrows, case numerals. */ --accent-text: #E1733A; --accent-fill: #E1733A; --accent-quiet: #7A3D1C; /* borders, rules, inactive states */ --accent-wash: #2A1810; /* hero gradient, tinted panels */ --on-accent: #1A0E07; /* text sitting on --accent-fill */ /* Teal — STATUS only. Availability, confirmations, progress. */ --signal-text: #63B1BD; --signal-fill: #63B1BD; --signal-quiet: #2E4A4F; --on-signal: #06232A; --weight-body: 300; --grain-blend: soft-light; --focus-ring: 0 0 0 2px var(--ground), 0 0 0 4px var(--accent-text); color-scheme: dark; } /* -------------------------------------------------------------------------- 3. LIGHT MODE Not an inversion. The dark mode's ink becomes this mode's ground, so the warmth is preserved. Both accents darken for text; fills stay saturated because their contrast comes from the dark type sitting on them. -------------------------------------------------------------------------- */ :root[data-theme="light"] { --ground: #F3EEE9; --surface-1: #EDE5DB; /* recessed bands, footer */ --surface-2: #FAF7F3; /* cards — LIGHTER than the page, same as dark */ --surface-3: #FFFDFA; /* raised / hover */ --border: #DFD6CC; --border-strong: #C9BDB1; --ink: #1A1613; --ink-muted: #665C56; /* 6.4:1 on --ground */ --ink-faint: #8A7F78; --accent-text: #B4531C; /* 4.9:1 — full ember fails at 2.5:1 here */ --accent-fill: #E1733A; /* unchanged; --on-accent carries the contrast */ --accent-quiet: #E0BBA0; --accent-wash: #F9EADE; --on-accent: #2A1206; --signal-text: #256B77; /* 5.2:1 */ --signal-fill: #2B7A87; --signal-quiet: #A8C7CD; --on-signal: #FFFFFF; --weight-body: 400; /* one step up — see note in section 1 */ --grain-blend: multiply; color-scheme: light; } /* -------------------------------------------------------------------------- 4. BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink-muted); font-family: var(--font-body); font-weight: var(--weight-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } /* Grain overlay. Attach once to . The SVG is inline so there is no extra request; swap for a tiling PNG if you prefer. */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-display); text-transform: uppercase; letter-spacing: var(--ls-display); color: var(--ink); margin: 0; } h1 { font-size: var(--fs-display-1); line-height: var(--lh-display); } h2 { font-size: var(--fs-display-2); line-height: var(--lh-display); } h3 { font-size: var(--fs-display-3); line-height: var(--lh-heading); } h4 { font-size: var(--fs-display-4); line-height: var(--lh-heading); } p { margin: 0 0 var(--sp-4); max-width: var(--measure); } p:last-child { margin-bottom: 0; } a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } ::selection { background: var(--accent-fill); color: var(--on-accent); } /* -------------------------------------------------------------------------- 5. COMPONENT PRIMITIVES -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--width-page); margin-inline: auto; padding-inline: var(--sp-gutter); } .section { padding-block: var(--sp-section); } /* Eyebrow — the wide-tracked mono label above every section. */ .eyebrow { font-family: var(--font-mono); font-weight: var(--weight-mono); font-size: var(--fs-mono-label); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--accent-text); margin: 0 0 var(--sp-4); } .eyebrow--muted { color: var(--ink-faint); } .lead { font-size: var(--fs-body-lead); color: var(--ink-muted); max-width: 46ch; } .card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4) var(--sp-4) var(--sp-5); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .card:hover { background: var(--surface-3); border-color: var(--border-strong); } /* Case numeral — big Oswald digits in ember. */ .numeral { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-metric); line-height: 1; color: var(--accent-text); display: block; margin-bottom: var(--sp-3); } /* Status pill — teal only. Never ember. */ .pill { display: inline-flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--signal-quiet); border-radius: var(--radius-pill); padding: var(--sp-1) var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-mono-label); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--signal-text); } .pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--signal-fill); } .tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-mono-label); color: var(--ink-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-2); margin: 0 var(--sp-1) var(--sp-2) 0; } .btn { display: inline-block; background: var(--accent-fill); color: var(--on-accent); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-mono-meta); letter-spacing: var(--ls-mono-sm); text-transform: uppercase; text-decoration: none; border: 1px solid var(--accent-fill); border-radius: var(--radius); padding: var(--sp-3) var(--sp-5); cursor: pointer; transition: transform var(--dur-fast) var(--ease); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); } .rule { height: 1px; border: 0; background: var(--border); margin-block: var(--sp-6); } .grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } /* Hero atmosphere. One gradient, top-left origin, on the hero only. */ .hero { background: radial-gradient(120% 90% at 15% 0%, var(--accent-wash) 0%, var(--ground) 62%); } /* -------------------------------------------------------------------------- 6. QUALITY FLOOR -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media (prefers-contrast: more) { :root { --ink-muted: var(--ink); --border: var(--border-strong); } }