/* ============================================================ Stray Dog Media — Design Tokens The single source of truth for the visual system. Direction (v0.3 — "refined but dangerous"): Black is the canvas, red is the bite. The brand lives in the dark — film black, blood red, bone white, heavy poster type and a fine grain over everything. Restraint everywhere so the red actually lands. Change a value here, it changes everywhere. Nothing below should hardcode a raw hex. ============================================================ */ :root { /* ---- Brand palette -------------------------------------- Three colours do the whole job: film black, blood red, bone white. Red is used sparingly and always means "look here" — a signal, never a decoration. */ --sdm-black: #0A0909; /* film black — the canvas */ --sdm-red: #D72229; /* blood red — the signal */ --sdm-red-deep: #7E0F14; /* dried blood — depth & gradients */ --sdm-red-hot: #F04148; /* hot red — accent text on black */ --sdm-red-ink: #A50E14; /* deep red — accent text on bone */ --sdm-bone: #F4F1EC; /* bone white — light canvas */ /* Neutral ramp: warm charcoal, tinted toward red, never blue. 50 = lightest (bone side) → 900 = darkest (black side). */ --n-50: #EFEBE6; --n-100: #E0DBD5; --n-200: #C7C1BA; --n-300: #A39C95; --n-400: #7E7772; --n-500: #5C5551; --n-600: #423C39; --n-700: #2C2726; --n-800: #1C1918; --n-900: #121010; /* ---- Semantic surface tokens (DARK is the default) ------- Black is the brand. Light is the alternate, not the base. Components reference these, never the raw ramp above. */ --bg: var(--sdm-black); --bg-elevated: #141111; --bg-sunken: #050404; --surface: #141111; --surface-2: #1C1918; --border: #272220; --border-strong: #3A3331; --text: #F4F1EC; --text-muted: #A9A19B; --text-subtle: #7B7370; --text-invert: var(--sdm-black); --accent: var(--sdm-red); --accent-deep: var(--sdm-red-deep); --accent-text: var(--sdm-red-hot); /* readable red on black */ --accent-contrast: #FFFFFF; /* text on an accent fill */ --focus-ring: color-mix(in srgb, var(--accent) 60%, transparent); /* Signature gradients / atmosphere ------------------------- */ --grad-red: linear-gradient(135deg, var(--sdm-red) 0%, var(--sdm-red-deep) 100%); --grad-scrim: linear-gradient(to top, rgba(5,4,4,0.92) 0%, rgba(5,4,4,0.35) 45%, rgba(5,4,4,0) 72%); --bloom: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent), transparent 65%); --grain-opacity: 0.055; --vignette-opacity: 0.34; /* ---- Typography ----------------------------------------- Display: Archivo (variable) — heavy, slightly condensed poster grotesque. Set in caps at display sizes, it is the single loudest brand signal on the page. Body: Inter — quiet, legible, gets out of the way. Mono: Space Mono — crew-slate energy for kickers and meta. */ --font-display: "Archivo", "Helvetica Neue", Impact, Arial, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Display width/weight: heavy and a touch condensed. Degrades to plain weight where the wdth axis is unsupported. */ --display-weight: 800; --display-width: 88%; /* Fluid type scale (clamp: min, preferred, max) */ --step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem); --step-0: clamp(1.00rem, 0.94rem + 0.30vw, 1.15rem); --step-1: clamp(1.25rem, 1.14rem + 0.55vw, 1.60rem); --step-2: clamp(1.56rem, 1.36rem + 1.00vw, 2.25rem); --step-3: clamp(1.95rem, 1.62rem + 1.65vw, 3.15rem); /* Display steps are deliberately smaller than a sentence-case scale would be: set in caps, they read ~30% larger. */ --step-4: clamp(2.10rem, 1.70rem + 2.00vw, 3.40rem); --step-5: clamp(2.60rem, 2.00rem + 3.00vw, 4.60rem); --leading-tight: 0.94; /* tight — caps stack like a poster */ --leading-snug: 1.14; --leading-body: 1.62; --tracking-tight: -0.015em; --tracking-display: -0.01em; --tracking-wide: 0.18em; /* mono kickers / eyebrows */ --weight-body: 400; --weight-medium: 500; --weight-bold: 700; /* ---- Space scale (8px base, fluid at the top) ------------ */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: clamp(4rem, 2.5rem + 6vw, 8rem); --space-3xl: clamp(6rem, 3rem + 10vw, 12rem); /* ---- Layout --------------------------------------------- */ --container: 76rem; /* ~1216px */ --container-narrow: 44rem; --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem); /* ---- Radius --------------------------------------------- Cut, not rounded. Sharp edges read as danger; keeping them identical everywhere is what makes it refined. */ --radius-xs: 1px; --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-pill: 999px; /* chips and toggles only */ /* ---- Elevation ------------------------------------------ On black, depth comes from a red edge-glow, not soft grey. */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.6); --shadow-md: 0 8px 24px rgba(0,0,0,0.55); --shadow-lg: 0 20px 60px rgba(0,0,0,0.7); --shadow-accent: 0 6px 26px color-mix(in srgb, var(--accent) 40%, transparent); --glow-red: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 10px 40px color-mix(in srgb, var(--accent) 22%, transparent); /* ---- Motion --------------------------------------------- Fast and decisive. Nothing floats. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur: 220ms; --dur-slow: 460ms; } /* ---- LIGHT theme (bone paper, ink type, same red) --------- The alternate. Red stays the signal but darkens so it holds contrast on paper; blacks become warm charcoal, not grey. */ :root[data-theme="light"] { --bg: var(--sdm-bone); --bg-elevated: #FFFFFF; --bg-sunken: var(--n-50); --surface: #FFFFFF; --surface-2: var(--n-50); --border: var(--n-100); --border-strong: var(--n-200); --text: #171413; --text-muted: var(--n-600); --text-subtle: var(--n-500); --text-invert: var(--sdm-bone); --accent-text: var(--sdm-red-ink); --accent-contrast: #FFFFFF; --grad-scrim: linear-gradient(to top, rgba(10,9,9,0.88) 0%, rgba(10,9,9,0.30) 45%, rgba(10,9,9,0) 72%); --grain-opacity: 0.03; --vignette-opacity: 0; --shadow-sm: 0 1px 2px rgba(20,16,16,0.07), 0 1px 3px rgba(20,16,16,0.08); --shadow-md: 0 4px 10px rgba(20,16,16,0.08), 0 12px 28px rgba(20,16,16,0.10); --shadow-lg: 0 12px 24px rgba(20,16,16,0.12), 0 28px 64px rgba(20,16,16,0.16); --glow-red: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 10px 30px color-mix(in srgb, var(--accent) 18%, transparent); }