/* Clone Viral Videos: design tokens v1.1 (28 Oct 2026) World: "The Step Sequencer". Keep the pattern, swap the kit. Fonts (Google): Big Shoulders (display + silkscreen labels), Schibsted Grotesk (body), Doto (LED readouts). Contrast ratios (WCAG 2.2) are listed in DESIGN.md. */ :root { color-scheme: light; /* Ground and surfaces: machine-grey paint, flat */ --bg: #ECECE8; /* page */ --surface: #F7F7F4; /* sections, panels */ --surface-raised: #FFFFFF; /* fields, table, cards */ --ink: #141517; /* 15.43 on bg, 17.02 on surface */ --ink-2: #46484C; /* 7.74 on bg, 8.54 on surface */ --ink-3: #5F6267; /* 5.17 on bg, 5.71 on surface, 6.12 on white */ --line: #D3D4CE; /* hairline dividers (decorative) */ --line-strong: #8A8C87; /* field + control borders: 3.40 on white */ /* Brand primary: cobalt (CTA, links, focus) */ --primary: #2F4FD0; /* as text: 5.63 on bg, 6.21 on surface */ --primary-hover: #2541B8; --on-primary: #FFFFFF; /* 6.67 on primary, 8.31 on hover */ --link: #2F4FD0; --focus: #2F4FD0; /* 5.63 vs bg (non-text >= 3) */ /* The machine: dark instrument panel, same in both modes */ --machine: #1B1C1E; --machine-2: #242528; /* recessed LCD / sub-panel */ --machine-line: #34363A; --machine-ink: #ECECE8; /* 14.40 on machine */ --machine-ink-2: #A7A9A4; /* 7.19 on machine */ --machine-ink-3: #8C8E8A; /* 5.16 on machine, 4.64 on machine-2 */ --machine-focus: #8AB4FF; /* focus ring on dark panels in both modes: 8.0+ */ --led: #FF5A3C; /* LED / chase light / readout text: 5.51 on machine */ --led-off: #3B2A27; /* Shot-role keys (the four step colours). Always ink text on them. */ --role-talk: #F04E36; /* talking person ink 5.09 */ --role-product: #5B93FF; /* product hero ink 6.14 */ --role-cutaway: #22A67A; /* cutaway / B-roll ink 5.92 */ --role-card: #EFEBE0; /* text card ink 15.34 */ --on-role: #141517; --key-ref: #3A3C40; /* reference (ghost) key; label --machine-ink-2 4.66 */ --key-ref-lit: #55585D; /* lit reference key; label --machine-ink 6.03 */ --key-ref-edge: #4A4C51; --key-ref-ink: #C4C6C1; /* label on reference key: 6.42, 4.69 while lit */ /* Video frames (storyboard thumbnails) */ --frame-ref: #2B2C2F; /* sketch lines --machine-ink-3 4.22 (graphic) */ --frame-clone: #1F2023; /* sketch lines --role-card */ --kraft: #C8A27A; /* demo brand label colour only */ /* Status */ --ok: #1A7050; /* 5.10 on bg */ --error: #B42318; /* 5.55 on bg */ /* Type */ --font-display: "Big Shoulders", "Arial Narrow", "Roboto Condensed", sans-serif; --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-readout: "Doto", ui-monospace, "Cascadia Mono", monospace; --fs-display: clamp(3.25rem, 1.9rem + 6vw, 6rem); /* h1, Big Shoulders 900, UPPER */ --fs-h2: clamp(2.25rem, 1.5rem + 3.2vw, 4rem); /* Big Shoulders 850, UPPER */ --fs-h3: 1.375rem; /* Schibsted 700 */ --fs-lede: clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem); --fs-body: 1.0625rem; /* 17px; 16px under 720px */ --fs-small: 0.875rem; --fs-label: 0.75rem; /* silkscreen: Big Shoulders 800, UPPER, +0.12em */ --fs-readout-lg: clamp(2rem, 1.6rem + 1.6vw, 3rem); /* Doto 800 */ --fs-readout: 1.25rem; --lh-display: 0.88; --lh-heading: 0.95; --lh-body: 1.55; --track-display: -0.005em; --track-label: 0.12em; /* Space: 4px base */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 136px; --section-y: clamp(72px, 9vw, 136px); --gutter: clamp(16px, 4vw, 48px); --container: 1200px; --prose: 68ch; /* Radius: keys, not pills */ --r-key: 6px; --r-button: 8px; --r-field: 10px; --r-panel: 16px; --r-machine: 20px; /* Elevation: objects on a desk, lit from above */ --shadow-rest: 0 1px 2px rgba(20, 21, 23, 0.08), 0 6px 16px -6px rgba(20, 21, 23, 0.16); --shadow-machine: 0 2px 4px rgba(20, 21, 23, 0.14), 0 28px 56px -20px rgba(20, 21, 23, 0.45); /* Keys are flat printed fills. Depth = one soft offset shadow, nothing embossed. */ --shadow-key: 0 1px 2px rgba(0, 0, 0, 0.22), 0 4px 10px -4px rgba(0, 0, 0, 0.32); --shadow-key-pressed: 0 0 1px rgba(0, 0, 0, 0.3); --led-glow: 0 0 0 2px rgba(255, 90, 60, 0.18), 0 0 12px 2px rgba(255, 90, 60, 0.55); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-key: cubic-bezier(0.3, 0, 0.2, 1); --dur-press: 90ms; --dur-ui: 200ms; --dur-reveal: 480ms; --loop: 8s; /* the chase light: one pass = the demo reel length */ } /* Dark: the whole room goes to stage black; the machine gets a rim. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #161719; --surface: #1F2023; --surface-raised: #292A2E; --ink: #EDEDE8; /* 15.27 on bg, 11.89 on frame-ref */ --ink-2: #B5B6B1; /* 8.79 on bg, 7.98 on surface */ --ink-3: #999B98; /* 6.40 on bg, 5.12 on raised */ --line: #2E3034; --line-strong: #777976; /* 3.71 on surface */ --primary: #5B93FF; --primary-hover: #8AB4FF; --on-primary: #141517; /* 6.14 on primary, 8.75 on hover */ --link: #8AB4FF; /* 8.59 on bg */ --focus: #8AB4FF; --machine: #0E0F10; --machine-2: #18191B; --machine-line: #2E3034; --machine-ink-3: #8C8E8A; /* 5.76 on machine */ --ok: #3FBF8A; --error: #FF7A6B; --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.6); --shadow-machine: 0 0 0 1px #2E3034, 0 28px 56px -20px rgba(0, 0, 0, 0.8); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #161719; --surface: #1F2023; --surface-raised: #292A2E; --ink: #EDEDE8; --ink-2: #B5B6B1; --ink-3: #999B98; --line: #2E3034; --line-strong: #777976; --primary: #5B93FF; --primary-hover: #8AB4FF; --on-primary: #141517; --link: #8AB4FF; --focus: #8AB4FF; --machine: #0E0F10; --machine-2: #18191B; --machine-line: #2E3034; --machine-ink-3: #8C8E8A; --ok: #3FBF8A; --error: #FF7A6B; --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.6); --shadow-machine: 0 0 0 1px #2E3034, 0 28px 56px -20px rgba(0, 0, 0, 0.8); } } @media (prefers-reduced-motion: reduce) { :root { --dur-press: 0ms; --dur-ui: 0ms; --dur-reveal: 0ms; } }