/* ============================================================= GHS Theme -- assets/css/tokens.css Full v2 authoritative design-system token set. Source: design-ref/v2/Testcase Groene Hart Service/_ds/ groene-hart-service-design-system/tokens (per _ds export) Synced: 2026-06-25 Load order: this file loads FIRST, before any component CSS. IMPORTANT: --font-display and --font-body point to our self-hosted woff2 files (Momo Trust Display + Nunito Sans). Do NOT switch to remote fonts or Google Fonts CDN. @package GHS_Theme @since 1.0.0 ============================================================= */ :root { /* ---------------------------------------------------------- BRAND PRIMITIVES Full palette from the v2 GHS design system (colors.css). Navy = primary identity, Teal = secondary accent, Orange = energy/CTA. ---------------------------------------------------------- */ --ghs-navy: #003865; /* primary brand navy (rgb 0,56,101) */ --ghs-navy-deep: #06243f; /* darker navy for text on light */ --ghs-navy-800: #053963; --ghs-navy-700: #103467; --ghs-navy-100: #c8dae8; --ghs-navy-50: #e1ebf3; --ghs-teal: #00aca8; /* secondary accent (rgb 0,172,168) */ --ghs-teal-600: #008a87; --ghs-teal-200: #b3e6e5; --ghs-orange: #f28c00; /* energy / call-to-action (242,140,0) */ --ghs-orange-800: #a85e00; --ghs-orange-600: #d97c00; --ghs-orange-400: #ffc264; --ghs-orange-200: #ffe0b0; --ghs-orange-100: #ffe0b0; --ghs-orange-50: #fff5e6; --ghs-steel: #4c7393; /* supporting steel blue (76,115,147) */ --ghs-steel-300: #9fb6c8; /* ---------------------------------------------------------- NEUTRALS ---------------------------------------------------------- */ --ghs-white: #ffffff; --ghs-paper: #f6f8fa; /* app/page background */ --ghs-mist: #eef2f6; /* subtle surface / hover fill */ --ghs-line: #dde5ec; /* hairline borders */ --ghs-line-strong: #c4d0db; /* stronger borders */ --ghs-slate-500: #5e7385; /* muted text */ --ghs-slate-700: #33485a; /* secondary text */ --ghs-ink: #0d1f2d; /* primary text */ --ghs-black: #000000; /* ---------------------------------------------------------- STATUS COLOURS ---------------------------------------------------------- */ --ghs-success: #2e9c6a; --ghs-success-bg: #e4f4ec; --ghs-warning: #f28c00; --ghs-warning-bg: #fdeccd; --ghs-danger: #d2453a; --ghs-danger-bg: #fbe6e4; --ghs-info: #00aca8; --ghs-info-bg: #def1f1; /* ---------------------------------------------------------- SEMANTIC COLOUR ALIASES Reference these in components, not raw primitives. ---------------------------------------------------------- */ --color-brand: var(--ghs-navy); --color-brand-strong: var(--ghs-navy-deep); --color-accent: var(--ghs-orange); --color-accent-hover: var(--ghs-orange-600); --color-secondary: var(--ghs-teal); --color-secondary-hover: var(--ghs-teal-600); --text-strong: var(--ghs-ink); --text-body: var(--ghs-slate-700); --text-muted: var(--ghs-slate-500); --text-subtle: var(--ghs-slate-500); /* alias used across components */ --text-on-brand: var(--ghs-white); --text-link: var(--ghs-navy); --surface-page: var(--ghs-paper); --surface-card: var(--ghs-white); --surface-sunken: var(--ghs-mist); --surface-brand: var(--ghs-navy); --surface-inverse:var(--ghs-navy-deep); --border-subtle: var(--ghs-line); --border-strong: var(--ghs-line-strong); --border-focus: var(--ghs-teal); --focus-ring: 0 0 0 3px rgba(0, 172, 168, 0.40); /* ---------------------------------------------------------- TYPOGRAPHY --font-display and --font-body use our self-hosted fonts. Momo Trust Display (woff2) replaces the v2 _ds 'Bricolage Grotesque'. Nunito Sans (woff2) replaces the v2 _ds 'Plus Jakarta Sans'. The _ds font stacks are NOT used here. ---------------------------------------------------------- */ --font-display: 'Momo Trust Display', system-ui, sans-serif; --font-body: 'Nunito Sans', system-ui, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Font-weight scale Note: Nunito Sans woff2 files available: 400, 700, 800. 500 and 600 are not available as woff2; the browser will synthesise or fall back to 400. We keep the v2 values as authored so the system is future-ready if weights are added. */ --fw-book: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; /* Type scale (1.250 major-third, tuned) -- from v2 _ds typography.css */ --fs-display: 3.5rem; /* 56 -- hero headings */ --fs-h1: 2.5rem; /* 40 */ --fs-h2: 2rem; /* 32 */ --fs-h3: 1.5rem; /* 24 */ --fs-h4: 1.25rem; /* 20 */ --fs-lg: 1.125rem; /* 18 -- lead body */ --fs-base: 1rem; /* 16 -- body copy */ --fs-sm: 0.875rem; /* 14 */ --fs-xs: 0.75rem; /* 12 -- labels/eyebrow */ /* Line-heights -- from v2 _ds typography.css */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Letter-spacing -- from v2 _ds typography.css */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-eyebrow: 0.12em; /* ---------------------------------------------------------- SPACING (4px base, rem values -- from v2 _ds spacing.css) Spacing change notes vs the previous v1 tokens: --space-0 added (0) --space-7: was 40px, now 3rem (48px) -- intentional v2 change --space-8: was 56px, now 4rem (64px) -- intentional v2 change --space-9: unchanged at 96px (6rem) ---------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ /* ---------------------------------------------------------- RADII Friendly, rounded (matches the approachable brand voice). --radius-xs added from v2 _ds; all others carry over. ---------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px; /* ---------------------------------------------------------- SHADOWS (soft, navy-tinted; no harsh black) --shadow-xs and --shadow-focus added from v2 _ds. ---------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(6, 36, 63, 0.06); --shadow-sm: 0 2px 6px rgba(6, 36, 63, 0.08); --shadow-md: 0 6px 18px rgba(6, 36, 63, 0.10); --shadow-lg: 0 16px 40px rgba(6, 36, 63, 0.14); --shadow-focus: var(--focus-ring); /* ---------------------------------------------------------- LAYOUT --container-max updated to 1200px (v2 _ds authoritative). Previous value was 1160px. --header-h added from v2 _ds. ---------------------------------------------------------- */ --container-max: 1200px; --header-h: 72px; /* ---------------------------------------------------------- MOTION (quick, friendly easing; no bounces) --dur-slow added from v2 _ds. ---------------------------------------------------------- */ --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; }