/* KidsVenues design tokens — stage 1 of the build plan. * * Source of truth: design_handoff_kidsvenues/README.md ("Design tokens", * "Interactions & behaviour", "Spacing & geometry"), transcribed as CSS * custom properties. Guarded by pipeline/test_design_tokens.py, which * re-parses the README color table against this file. * * Stage-1 boundary: tokens ONLY. No component CSS, no element styles — * those arrive with the templates (stages 4–6). * * Corrections from kidsvenues_frontend-handoff.md that touch tokens: * §5.6 distances render in miles — the export's "min" labels are a mock * defect; no drive-time token exists on purpose. * §5.13 teal remains "trust furniture only"; the homepage party card's * trust-tint is an unresolved designer call — nothing here blesses it. * * Fonts: Plus Jakarta Sans (400–800) + JetBrains Mono (400/500, mono * microlabels only). Self-hosted @font-face rules land with the base * template (stage 6) — a Google Fonts request is a Core Web Vitals cost * the README tells us to avoid in production. */ :root { /* ---------- color ---------- */ --color-accent: #F4633A; /* CTA fills, primary buttons, featured borders, doodle strokes */ --color-accent-deep: #C2492A; /* links, type-badge text on tint, inline arrows */ --color-accent-tint: #FCE5DC; /* enriched hero band, type badge bg, category card */ --color-accent-tint-ink: #9A5A48; /* secondary text on accent tint */ --color-trust: #0E7A6E; /* Verified badge fill + checks — RESERVED for trust furniture */ --color-trust-tint: #EAF4F2; /* verified attribute chip bg */ --color-trust-tint-ink: #0B5F56; /* verified attribute chip text */ --color-support: #F5B63F; /* doodles and fallback art ONLY */ /* ink ramp per the README table. The token-sheet PNG (10-tokens- foundation.png) labels #6B625A "ink-2" — a condensed 8-swatch summary, not the source: the canvas uses #3D3730 104 times as body copy. */ --color-ink: #1E1A17; /* headings, primary text, dark strip */ --color-ink-2: #3D3730; /* body copy */ --color-ink-3: #6B625A; /* secondary/meta text */ --color-ink-4: #8A8078; /* tertiary, mono labels, placeholders */ --color-paper: #FDFBF9; /* page/card surface */ --color-white: #FFFFFF; /* raised cards inside paper */ --color-wash: #F3EFEA; /* page background, neutral chips, inert pills */ --color-wash-2: #F8F4EF; /* Know-before-you-go / facts-strip fills */ --color-line: #E8E1DA; /* 1px card borders */ --color-line-soft: #F0EAE3; /* section dividers inside pages */ --color-line-hard: #D8CFC6; /* canvas dividers, desktop frame border */ --color-dot: #CFC6BC; /* interpunct separators in meta rows */ --color-fill-grey: #EDE7E0; /* map placeholder */ /* interaction + dark-strip colors (README "Interactions" / homepage 6a) */ --color-link: var(--color-accent-deep); --color-link-hover: #9A3820; --color-ink-inverse-muted: #B8AFA6; /* explainer text on the ink verification strip */ /* ---------- typography ---------- */ --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --weight-400: 400; --weight-500: 500; --weight-600: 600; --weight-700: 700; --weight-800: 800; /* role scale — mobile value; desktop overrides below where the export specifies a ranged or per-breakpoint size */ --text-h1-home: 32px; /* 800, tracking -0.025em, lh 1.08 */ --text-h1-page: 27px; /* 800, -0.02em, lh 1.15 */ --text-h1-venue: 27px; /* desktop 38px */ --text-h2-venue-name: 21px; /* 800, -0.015em */ --text-h2-section: 18px; /* 800, -0.015em; desktop up to 22px */ --text-intro: 15.5px; /* 400, lh 1.65–1.7 */ --text-body: 14.5px; /* 400, lh 1.65–1.7 */ --text-meta: 13.5px; --text-caption: 12px; /* ink-4 */ --text-type-badge: 11.5px; /* 700 primary / 600 secondary */ --text-chip: 12px; /* 600 verified / 500 neutral */ --text-verified: 10.5px; /* 600 */ --text-button: 14px; /* 700 */ --tracking-tightest: -0.025em; --tracking-tight: -0.02em; --tracking-snug: -0.015em; --leading-h1-home: 1.08; --leading-h1-page: 1.15; --leading-h1-venue: 1.05; --leading-body: 1.65; --leading-body-max: 1.7; --measure-body: 640px; /* desktop body copy max width (~620–640px) */ /* ---------- spacing (4px base) ---------- */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; /* ---------- geometry ---------- */ --radius-card: 16px; --radius-card-lg: 18px; --radius-panel: 20px; --radius-panel-lg: 24px; --radius-inner: 12px; /* photos / inner blocks */ --radius-pill: 999px; /* chips and buttons */ --border-width: 1px; /* resting state is borders, not elevation */ --border-card: 1px solid var(--color-line); --border-featured-width: 1.5px; /* FeaturedCard, accent */ /* brand asset kit (2 Sep 2026): border/unknown is 1.5px dashed kv/dash #CFC6BC — the same hex as --color-dot, so no new color token; and shadow/lift is the ONLY shadow (hover/lift; resting cards are flat). */ --border-unknown: 1.5px dashed var(--color-dot); --shadow-lift: 0 6px 20px rgba(30, 26, 23, 0.10); --tap-min: 44px; /* every mobile action */ --transition-lift: 180ms ease-out; /* hover lift/shadow; keep 150–200ms */ /* ---------- layout ---------- */ --page-pad-mobile: 20px; /* 390px design canvas */ --page-pad-desktop: 40px; /* 1200px design canvas */ --content-max: 1200px; --rail-city: 300px; /* city page rail: map, On this page, nearby */ --rail-venue: 320px; /* venue page sticky practical card */ --rail-gap: 48px; /* single breakpoint: single column below 900px. Custom properties cannot drive @media queries — build templates hard-code 900px and this token documents the value they must agree with. */ --bp-single-column: 900px; } /* desktop overrides for the ranged/per-breakpoint sizes in the export's type table — token values only, still no selectors beyond :root */ @media (min-width: 900px) { :root { --text-h1-page: 36px; /* 800, -0.025em, lh 1.1 */ --text-h1-venue: 38px; /* 800, -0.025em, lh 1.05 */ --text-h2-venue-name: 24px; --text-h2-section: 22px; --text-intro: 16px; --text-body: 15.5px; --text-meta: 14px; --text-caption: 12.5px; --text-chip: 12.5px; --text-verified: 11px; --text-button: 15px; } }