/* ============================================================ fun-run.co.uk — Design tokens Single source of truth for colour, type, spacing, radius, shadow. Consumed by components.css and all four layout stylesheets. ============================================================ */ :root { /* ---------- Colour ----------------------------------------- */ /* Brand — amber, the sporty CTA accent */ --fr-color-primary: #f0a90b; --fr-color-primary-hover: #d99807; --fr-color-primary-active: #b97f06; --fr-color-primary-soft: #fdf1d6; --fr-color-primary-on: #ffffff; /* Ink — text and icon fills */ --fr-color-ink: #1a1a1a; /* primary text — near black */ --fr-color-ink-muted: #54607a; /* secondary text, labels */ --fr-color-ink-subtle: #8893a8; /* meta, eyebrows */ --fr-color-ink-inverse: #ffffff; --fr-color-heading: #355579; /* H1 + H2 — deep navy-blue */ /* Surfaces */ --fr-color-bg: #faf6ef; /* page — warm cream */ --fr-color-bg-strong: #f3eddf; /* alt page sections */ --fr-color-surface: #ffffff; /* cards, inputs */ --fr-color-surface-sunken: #f7f3ea; --fr-color-surface-inverse: #16213a; /* Borders */ --fr-color-border: #ece5d4; /* default */ --fr-color-border-strong: #d8cfb8; --fr-color-border-input: #cfc5ac; --fr-color-border-focus: #f0a90b; /* Status */ --fr-color-success: #2d7a4d; --fr-color-success-soft: #e1f1e7; --fr-color-success-on: #ffffff; --fr-color-danger: #c3392c; --fr-color-danger-hover: #ad2f23; --fr-color-danger-soft: #fbe5e1; --fr-color-danger-on: #ffffff; --fr-color-warning: #a76d0e; --fr-color-warning-soft: #fbeed1; --fr-color-info: #235a9c; --fr-color-info-soft: #e3edf8; /* Focus ring (used on every focusable thing) */ --fr-color-focus-ring: rgba(240, 169, 11, 0.32); /* ---------- Typography ------------------------------------- */ --fr-font-sans: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --fr-font-serif: 'Bree Serif', Georgia, 'Times New Roman', serif; --fr-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Type scale — modular, 1rem = 16px */ --fr-text-xs: 0.75rem; /* 12 */ --fr-text-sm: 0.875rem; /* 14 */ --fr-text-base: 1rem; /* 16 */ --fr-text-md: 1.0625rem; /* 17 */ --fr-text-lg: 1.25rem; /* 20 */ --fr-text-xl: 1.5rem; /* 24 */ --fr-text-2xl: 1.875rem; /* 30 */ --fr-text-3xl: 2.375rem; /* 38 */ --fr-text-4xl: 3rem; /* 48 */ /* Weight */ --fr-weight-regular: 400; --fr-weight-medium: 500; --fr-weight-semibold: 600; --fr-weight-bold: 700; /* Line height */ --fr-leading-tight: 1.15; --fr-leading-snug: 1.3; --fr-leading-normal: 1.5; --fr-leading-relaxed: 1.65; /* Letter spacing */ --fr-tracking-tight: -0.02em; --fr-tracking-normal: 0; --fr-tracking-wide: 0.04em; /* small-caps eyebrows */ /* ---------- Spacing ---------------------------------------- */ /* 4-px grid */ --fr-space-0: 0; --fr-space-1: 0.25rem; /* 4 */ --fr-space-2: 0.5rem; /* 8 */ --fr-space-3: 0.75rem; /* 12 */ --fr-space-4: 1rem; /* 16 */ --fr-space-5: 1.25rem; /* 20 */ --fr-space-6: 1.5rem; /* 24 */ --fr-space-7: 2rem; /* 32 */ --fr-space-8: 2.5rem; /* 40 */ --fr-space-9: 3rem; /* 48 */ --fr-space-10: 4rem; /* 64 */ --fr-space-11: 5rem; /* 80 */ /* Container widths */ --fr-container-narrow: 28rem; /* auth */ --fr-container-content: 44rem; /* article */ --fr-container-wide: 72rem; /* admin/public default */ --fr-container-wizard: 56rem; /* wizard step body */ --fr-container-pad-x: clamp(1rem, 4vw, 2rem); /* ---------- Radius ----------------------------------------- */ --fr-radius-xs: 4px; --fr-radius-sm: 6px; --fr-radius-md: 10px; --fr-radius-lg: 14px; --fr-radius-xl: 20px; --fr-radius-pill: 999px; /* ---------- Shadow ----------------------------------------- */ --fr-shadow-xs: 0 1px 1px rgba(22, 33, 58, 0.04); --fr-shadow-sm: 0 1px 2px rgba(22, 33, 58, 0.06), 0 1px 1px rgba(22, 33, 58, 0.03); --fr-shadow-md: 0 6px 16px -4px rgba(22, 33, 58, 0.10), 0 2px 4px rgba(22, 33, 58, 0.04); --fr-shadow-lg: 0 18px 38px -12px rgba(22, 33, 58, 0.18), 0 6px 12px -4px rgba(22, 33, 58, 0.06); --fr-shadow-focus: 0 0 0 4px var(--fr-color-focus-ring); /* ---------- Motion ----------------------------------------- */ --fr-duration-fast: 120ms; --fr-duration-base: 180ms; --fr-ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* ---------- Z-index ---------------------------------------- */ --fr-z-sticky: 100; --fr-z-overlay: 500; --fr-z-modal: 900; --fr-z-toast: 1100; } /* ============================================================ Base reset — minimal, plain CSS ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--fr-font-sans); font-size: var(--fr-text-base); line-height: var(--fr-leading-normal); color: var(--fr-color-ink); background: var(--fr-color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fr-weight-bold); line-height: var(--fr-leading-tight); letter-spacing: var(--fr-tracking-tight); color: var(--fr-color-ink); } /* H1 + H2 get the display serif treatment */ h1, h2 { font-family: var(--fr-font-serif); letter-spacing: -0.01em; color: var(--fr-color-heading); } p { margin: 0; } a { color: var(--fr-color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:not(.fr-btn):hover { color: var(--fr-color-primary-hover); } img, svg { display: block; max-width: 100%; } :focus-visible { outline: 2px solid var(--fr-color-primary); outline-offset: 2px; } /* Utility — visually hidden but available to AT */ .fr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }