/* ========================================================================= blackfullscreen.com — design tokens ========================================================================= Why this file exists -------------------- style.css is 13KB of hardcoded values with essentially one custom property, so every new surface drifted from the last. Anything added on top looked pasted on because there was nothing to inherit from. These tokens are the thing to inherit from. Nothing below this file should hardcode a colour, a radius or a spacing step. Two decisions worth knowing --------------------------- 1. NO fixed brand accent. This product IS colour, so any accent we picked would sit next to a swatch and fight it. Instead each page injects the colour it is about as --active, and that becomes the accent for focus rings and the selected tile. Twenty pages feel individual off one stylesheet, and the UI never competes with the sample. 2. The stage is dark inside a light UI. People come here to look at dark screens; a preview panel that is a bright card would defeat the tool. The chrome is light (a deliberate choice), the sample area is not. Neutrals are warm-biased (a touch of yellow/red) rather than pure grey, so they read as chosen rather than defaulted. ========================================================================= */ :root { /* ---- surfaces ---- */ --ground: #FAFAF9; /* page background */ --surface: #FFFFFF; /* cards, panels */ --sunken: #F1F1EF; /* inset wells, input backgrounds */ --line: #E3E2DF; /* borders */ --line-2: #D3D2CE; /* stronger borders, hover */ /* ---- text ---- */ --ink: #17181A; /* primary */ --ink-2: #5C5F66; /* secondary */ --ink-3: #8B8F96; /* captions, disabled */ /* ---- the preview panel: dark on purpose, see note above ---- */ --stage: #101113; --stage-line: #26282C; --stage-ink: #9BA1AA; /* ---- per-page accent. Overridden inline by each colour page. ---- */ --active: #17181A; --active-ink: #FFFFFF; /* text that sits ON --active */ /* ---- semantic (kept separate from --active so state never depends on which colour page you happen to be on) ---- */ --ok: #2F7D53; --warn: #A8641B; --bad: #B23A2F; /* ---- radius ---- */ --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px; /* ---- spacing scale. Use these, not arbitrary px. ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ---- elevation ---- Layered rather than a single blur: a tight contact shadow plus a wide soft one is what stops a card reading as a flat outlined box. */ --lift-1: 0 1px 2px rgba(23, 24, 26, .05); --lift-2: 0 1px 2px rgba(23, 24, 26, .05), 0 8px 24px -14px rgba(23, 24, 26, .28); --lift-3: 0 2px 4px rgba(23, 24, 26, .06), 0 24px 48px -24px rgba(23, 24, 26, .34); --lift-4: 0 1px 1px rgba(23,24,26,.04), 0 4px 8px -4px rgba(23,24,26,.08), 0 24px 56px -24px rgba(23,24,26,.30), 0 48px 96px -48px rgba(23,24,26,.24); /* Glow cast by the active colour. This is the single most "designed" moment on the page and the reason the stage does not read as a plain rectangle. */ --glow: 0 0 0 1px color-mix(in srgb, var(--active) 22%, transparent), 0 8px 32px -8px color-mix(in srgb, var(--active) 38%, transparent), 0 24px 80px -24px color-mix(in srgb, var(--active) 46%, transparent); /* Hairline that catches light along a top edge, like a real surface. */ --sheen: inset 0 1px 0 rgba(255, 255, 255, .7); /* ---- type ---- ClashDisplay stays for headings: already self-hosted, already the brand, and the one genuinely distinctive thing on the page. Body/UI is a system stack so we add zero webfont weight. */ --font-display: 'ClashDisplay-Bold', 'ClashDisplay-Semibold', system-ui, sans-serif; --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 19px; --t-xl: 24px; --t-2xl: 32px; --t-3xl: clamp(34px, 5.2vw, 56px); /* ---- motion ---- */ --ease: cubic-bezier(.4, 0, .2, 1); --fast: .14s; --med: .24s; --maxw: 1120px; } /* ========================================================================= Dark theme. Only tokens are redefined here — never style components inside a media query, or the toggle below cannot override them. ========================================================================= */ @media (prefers-color-scheme: dark) { :root { --ground: #0E0F11; --surface: #17191C; --sunken: #1F2226; --line: #2A2D32; --line-2: #3A3E45; --ink: #ECEDEF; --ink-2: #A3A8B0; --ink-3: #767C85; --stage: #08090A; --stage-line: #24262A; --stage-ink: #8E949C; --active-ink: #FFFFFF; --ok: #5FB683; --warn: #D69A4A; --bad: #E0796C; --lift-1: 0 1px 2px rgba(0, 0, 0, .5); --lift-2: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -14px rgba(0, 0, 0, .8); --lift-3: 0 2px 4px rgba(0, 0, 0, .55), 0 24px 48px -24px rgba(0, 0, 0, .9); --lift-4: 0 1px 1px rgba(0,0,0,.5), 0 4px 8px -4px rgba(0,0,0,.6), 0 24px 56px -24px rgba(0,0,0,.85), 0 48px 96px -48px rgba(0,0,0,.9); --sheen: inset 0 1px 0 rgba(255, 255, 255, .06); } } /* The toggle stamps data-theme on . These must win in BOTH directions, so light is restated explicitly rather than relying on the media query. */ :root[data-theme="light"] { --ground: #FAFAF9; --surface: #FFFFFF; --sunken: #F1F1EF; --line: #E3E2DF; --line-2: #D3D2CE; --ink: #17181A; --ink-2: #5C5F66; --ink-3: #8B8F96; --stage: #101113; --stage-line: #26282C; --stage-ink: #9BA1AA; --active-ink: #FFFFFF; --ok: #2F7D53; --warn: #A8641B; --bad: #B23A2F; --lift-1: 0 1px 2px rgba(23, 24, 26, .05); --lift-2: 0 1px 2px rgba(23, 24, 26, .05), 0 8px 24px -14px rgba(23, 24, 26, .28); --lift-3: 0 2px 4px rgba(23, 24, 26, .06), 0 24px 48px -24px rgba(23, 24, 26, .34); } :root[data-theme="dark"] { --ground: #0E0F11; --surface: #17191C; --sunken: #1F2226; --line: #2A2D32; --line-2: #3A3E45; --ink: #ECEDEF; --ink-2: #A3A8B0; --ink-3: #767C85; --stage: #08090A; --stage-line: #24262A; --stage-ink: #8E949C; --active-ink: #FFFFFF; --ok: #5FB683; --warn: #D69A4A; --bad: #E0796C; --lift-1: 0 1px 2px rgba(0, 0, 0, .5); --lift-2: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -14px rgba(0, 0, 0, .8); --lift-3: 0 2px 4px rgba(0, 0, 0, .55), 0 24px 48px -24px rgba(0, 0, 0, .9); }