/* ─────────────────────────────────────────────────────────────────────────── DS TOKENS — one source of truth for the Design Studios Creative AI site ───────────────────────────────────────────────────────────────────────── The DS launch brand (same palette as the Hackathon "GLITCH" system in hackathon-26-brand/theme.css) — but EDITORIAL and LIGHT-LED for the whole DS audience (designers, directors, managers), not hacker-only. Signature: orange #FF7F52 accent · purple #9744E0 secondary · the gradient. Type: Hanken Grotesk (body) · Fraunces italic (expressive) · JetBrains Mono (labels). Two themes via : light → DEFAULT for all DS-facing rooms (Studio, Lab, Signal) dark → the admin-only Hub (cockpit) ds-shell.js sets the default per PLACE; a toggle lets anyone override (remembered per device). Token NAMES match theme.css so pages move freely between the two systems. ─────────────────────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { --bg: #FAFAF7; /* warm paper, never stark white */ --surface: #FFFFFF; --surface-2: #F4F2EC; --rule: #E6E3DA; --ink: #0A0B0E; /* primary text */ --ink-2: #3B4048; /* secondary text */ --ink-muted: #7C8088; /* official DS palette (Figma): Sunflare=orange, Volt=purple/magenta, Mauve=greys. On light, coloured TEXT uses the deeper steps for AA (the bright tones blow out on paper). */ --orange: #C2502D; --purple: #872894; --magenta: #B436C6; --cyan: #1374DB; --green: #1FA968; --accent: var(--orange); /* primary accent */ --accent-2:var(--purple); /* secondary accent */ --btn-ink: #FFFFFF; /* text on a solid accent button */ --shadow: 0 10px 34px rgba(10,11,14,.10); --glow: rgba(224,100,31,.16); --danger: #C2331F; } [data-theme="dark"] { --bg: #0A0B0E; /* never pure black */ --surface: #101216; --surface-2: #15181E; --rule: #23262E; --ink: #F5F6F7; --ink-2: #C9CCD2; --ink-muted: #7A8090; --orange: #FF7F52; --purple: #CD55E3; --magenta: #B436C6; --cyan: #1A8DFF; --green: #35ED8E; --accent: var(--orange); --accent-2:var(--purple); --btn-ink: #0A0B0E; --shadow: 0 10px 34px rgba(0,0,0,.45); --glow: rgba(255,127,82,.18); --danger: #FF7A6B; } :root { /* — the signature gradient (fixed vivid hues on both themes; hero word + spine only) — */ --grad: linear-gradient(100deg, #FF7F52 0%, #CD55E3 52%, #872894 100%); --grad-soft: linear-gradient(90deg, rgba(255,127,82,.10), rgba(205,85,227,.10)); /* — type — */ /* Official DS type = BCG Henderson (licensed; installed on BCG machines). We reference it as a LOCAL font — never self-hosted — so BCG staff get the real face and everyone else falls back to the close web fonts we load (Hanken / Fraunces). No web-licensing issue. */ --font-sans: 'Henderson BCG Sans', 'BCG Henderson Sans', 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-serif: 'Henderson BCG Serif', 'BCG Henderson Serif', 'Fraunces', Georgia, 'Times New Roman', serif; /* — fluid type scale (mobile-first) — */ --step--1: clamp(0.83rem, 0.78rem + 0.2vw, 0.94rem); --step-0: clamp(1rem, 0.95rem + 0.3vw, 1.13rem); --step-1: clamp(1.25rem,1.15rem + 0.6vw, 1.6rem); --step-2: clamp(1.56rem,1.4rem + 1vw, 2.25rem); --step-3: clamp(1.95rem,1.7rem + 1.6vw, 3.15rem); --step-4: clamp(2.44rem,2rem + 2.6vw, 4.4rem); /* — spacing / radius / motion — */ --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem); --space-s: clamp(0.75rem,0.6rem + 0.8vw, 1.25rem); --space-m: clamp(1.25rem,1rem + 1.4vw, 2rem); --space-l: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); --space-xl: clamp(3rem, 2rem + 5vw, 6rem); --radius-s: 8px; --radius-m: 14px; --radius-l: 20px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --motion: 0.30s; --maxw: 1080px; } /* — base — */ *{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; } body{ margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background var(--motion) var(--ease), color var(--motion) var(--ease); } a{ color: var(--accent); } /* — shared editorial kit (use on any page) — */ .grad{ background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .ds-kicker{ font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; } .ds-h1{ font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: var(--step-4); line-height: 1.0; letter-spacing: -.015em; margin: 0 0 14px; } .ds-h2{ font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: var(--step-2); line-height: 1.06; letter-spacing: -.01em; margin: 0 0 12px; } .ds-em{ font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--accent-2); } .ds-sub{ color: var(--ink-2); font-size: var(--step-1); max-width: 56ch; } .ds-card{ background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-m); padding: clamp(20px,3vw,32px); box-shadow: var(--shadow); } .ds-btn{ display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: var(--btn-ink); border: 0; border-radius: 999px; padding: 15px 26px; font-family: var(--font-sans); font-weight: 700; font-size: 16px; cursor: pointer; text-decoration: none; transition: transform var(--motion) var(--ease), filter var(--motion) var(--ease); } .ds-btn:hover{ filter: brightness(1.06); transform: translateY(-1px); } .ds-btn--grad{ background: var(--grad); color: #fff; } .ds-badge{ display: inline-block; background: var(--grad-soft); color: var(--accent); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } @media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; } }