/** * Bygghyllan design tokens — CSS SSOT * * Consumed by: * - apps/web/app/globals.css (@import) * - apps/marketing (copied into public/ on build) * * Palette: workshop paper & copper. * Do not redefine these hex values in app components or marketing layout CSS. * TypeScript mirror for design-system showcase: apps/web/lib/tokens.ts * Spec: docs/DESIGN.md */ :root { /* Accent — copper */ --copper: #e8916a; --copper-600: #d47852; --copper-300: #f0b396; --on-copper: #1a120e; /* aliases so existing bg-amber utilities keep working */ --amber: var(--copper); --amber-600: var(--copper-600); --amber-300: var(--copper-300); --on-amber: var(--on-copper); /* Logo / mark — warm charcoal */ --mark-top: #3a342c; --mark-hi: #4a4339; --mark-arch: #1a1714; /* Surfaces — dark (espresso) */ --bg: #13110f; --surface: #1c1916; --surface-2: #27231e; --elevate: #302b25; /* Text — warm parchment hierarchy */ --text: #faf6f1; --text-muted: #a69f94; --text-faint: #7f786e; /* Lines — warm white */ --border: rgba(250, 240, 225, 0.09); --border-strong: rgba(250, 240, 225, 0.16); /* Semantic status — soft, not neon */ --ok: #5aaf8a; --warn: #e0a04a; --err: #e05d52; --info: #6b9ec4; --on-err: #1a120e; /* Text-safe accent/status on dark surfaces */ --copper-fg: #f0a888; --amber-fg: var(--copper-fg); --ok-fg: #6bc49a; --warn-fg: #e8b05c; --err-fg: #ef7a72; --info-fg: #85b4d4; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 36px rgba(0, 0, 0, 0.38); /* Motion clocks + curve (DESIGN.md) */ --duration-snap: 120ms; --duration-base: 200ms; --duration-enter: 320ms; --ease-mechanical: cubic-bezier(0, 0, 0.2, 1); /* Radius scale — sm 4 / md 8 / lg 14 / pill 999 */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-card: 14px; --radius-control: 8px; /* Type steps (named only — never invent px in UI) */ --text-micro: 10px; --text-micro--line-height: 14px; --text-label: 11px; --text-label--line-height: 16px; --text-body-sm: 13px; --text-body-sm--line-height: 18px; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-h3: 24px; --text-h2: 32px; --text-h1: 44px; --text-display: 64px; /* * Fonts — marketing sets these; HQ next/font overrides on with the * same variable names so both surfaces share the family contract. */ --font-bricolage: "Bricolage Grotesque", system-ui, sans-serif; --font-plex-mono: "IBM Plex Mono", ui-monospace, monospace; } [data-theme="light"] { /* Workshop paper */ --bg: #f7f3ec; --surface: #fffcf7; --surface-2: #efe9df; --elevate: #ffffff; --text: #1c1915; --text-muted: #5e574e; --text-faint: #6e675e; --border: rgba(40, 32, 24, 0.09); --border-strong: rgba(40, 32, 24, 0.15); --shadow: 0 1px 2px rgba(40, 32, 24, 0.05), 0 12px 32px rgba(40, 32, 24, 0.07); /* Text-safe on light grounds */ --copper-fg: #9a4f2e; --amber-fg: var(--copper-fg); --ok-fg: #1f6b4a; --warn-fg: #8a5a0a; --err-fg: #b02d24; --info-fg: #2a628a; }