/* =========================================================================== Lippukone — design tokens =========================================================================== Section 1 of site.css until CUSTOMER_SITE_PLAN.md put one header on the marketing site and the buyer app. The tokens and the two webfonts live here so header.css can be linked by a second document — the buyer SPA shell — without dragging the rest of the marketing stylesheet in with them. Light is the default and dark is the override, whatever the OS says: dark is only ever an explicit choice. The marketing pages get that choice from theme-boot.js; the buyer app stamps `data-theme` on from the Vuetify theme it is showing, so these resolve to the same colours the app around them is using (frontend/apps/buyer/src/composables/useSiteTheme.ts). The apps default to light too (frontend/shared/src/theme/index.ts). Link order is tokens.css, header.css, site.css — later sheets override earlier ones and the header's `display` rules depend on it. =========================================================================== */ /* --- 1. Tokens ---------------------------------------------------------- */ :root { color-scheme: light; --bg: #f8fafc; --bg-raised: #ffffff; --bg-elevated: #f1f5f9; --ink: #0f172a; --ink-strong: #020617; --ink-muted: #52627a; --line: #e2e8f0; --line-strong: #cbd5e1; --accent: #0d9488; --accent-ink: #ffffff; --accent-soft: rgba(13, 148, 136, 0.1); --accent-2: #7c3aed; /* The accent as *text*, which is a different requirement from the accent as a fill. Two shades of one teal, because a colour that is legible as a 40px button is not automatically legible as 13px type. --accent on white is 3.7:1, which fails WCAG AA for anything under 18.66px bold — and every accent string on the site (eyebrows, event dates, card links) is smaller than that. This is the same teal darkened to 5.5:1. The fill keeps --accent, so buttons and borders do not change. */ --accent-text: #0f766e; /* Used on the hero title and on decorative glows only. Never on body text: gradient-clipped paragraphs lose contrast at the pale end and stop being selectable-looking. */ --gradient: linear-gradient(115deg, #0d9488 0%, #2563eb 52%, #7c3aed 100%); --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 18px 48px -30px rgba(15, 23, 42, 0.28); --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Space Grotesk', var(--font-body); --wrap: 1120px; --gutter: 20px; --header-height: 68px; } /* The dark theme is a full re-declaration rather than a few overrides, so every token has one obvious value per theme and neither inherits a colour that only made sense in the other. */ :root[data-theme='dark'] { color-scheme: dark; --bg: #0b1120; --bg-raised: #111827; --bg-elevated: #1e293b; --ink: #e2e8f0; --ink-strong: #f8fafc; --ink-muted: #94a3b8; --line: rgba(148, 163, 184, 0.16); --line-strong: rgba(148, 163, 184, 0.28); --accent: #2dd4bf; --accent-ink: #04231f; --accent-soft: rgba(45, 212, 191, 0.14); --accent-2: #8b5cf6; /* On this background the accent clears 9:1, so text and fill can share it. */ --accent-text: #2dd4bf; --gradient: linear-gradient(115deg, #2dd4bf 0%, #60a5fa 52%, #8b5cf6 100%); --shadow: 0 1px 2px rgba(2, 6, 23, 0.4), 0 18px 48px -28px rgba(2, 6, 23, 0.9); } /* --- Fonts ---------------------------------------------------------------- */ @font-face { font-family: 'Inter'; src: url('/site/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212; } @font-face { font-family: 'Space Grotesk'; src: url('/site/fonts/space-grotesk.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212; }