/* ============================================================= * UK Coin Hunt — Design Tokens (2026) * * Single source of truth for colour, spacing, typography, * radius, shadow, z-index, easing and breakpoint values used * throughout the theme. Loaded BEFORE every other stylesheet * so component CSS can reference these tokens. * * Naming uses the `--ukch-` prefix to avoid colliding with * Bootstrap (`--bs-*`) or component-scoped tokens (`--hp-*`, * `--cp-*`, etc.) that already exist in the redesign files. * * Component CSS should prefer these tokens over hard-coded * hex / px values. Existing per-component scoped tokens * (`--hp-gold`, `--cp-gold`, `--ck-gold` …) now alias to the * global ones below so the values stay in sync. * ============================================================= */ :root { /* ---------- Brand palette ---------- */ --ukch-color-gold: #cfa362; --ukch-color-gold-dark: #b88d4f; --ukch-color-gold-soft: rgba(207, 163, 98, 0.35); --ukch-color-gold-bg: rgba(207, 163, 98, 0.08); /* ---------- Neutrals ---------- */ --ukch-color-ink: #1c1c1e; --ukch-color-ink-soft: #3a3a3c; --ukch-color-muted: #6b6258; --ukch-color-line: #e8e2d6; --ukch-color-paper: #ffffff; --ukch-color-ivory: #faf7f2; --ukch-color-ivory-warm: #f6efe1; /* ---------- Semantic ---------- */ --ukch-color-success: #2e8c5a; --ukch-color-success-soft: rgba(46, 140, 90, 0.10); --ukch-color-warning: #c98a2e; --ukch-color-danger: #b8453f; --ukch-color-danger-soft: rgba(184, 69, 63, 0.10); --ukch-color-info: #4a6f9e; /* ---------- Typography ---------- */ --ukch-font-serif: "Lora", Georgia, "Times New Roman", serif; --ukch-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ukch-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --ukch-fs-xs: 12px; --ukch-fs-sm: 14px; --ukch-fs-base: 16px; --ukch-fs-md: 18px; --ukch-fs-lg: 20px; --ukch-fs-xl: clamp(22px, 2.4vw, 28px); --ukch-fs-2xl: clamp(28px, 3vw, 36px); --ukch-fs-hero: clamp(34px, 5vw, 56px); --ukch-lh-tight: 1.15; --ukch-lh-snug: 1.35; --ukch-lh-normal: 1.55; --ukch-lh-loose: 1.75; --ukch-fw-regular: 400; --ukch-fw-medium: 500; --ukch-fw-semibold: 600; --ukch-fw-bold: 700; --ukch-tracking-tight: -0.01em; --ukch-tracking-normal: 0; --ukch-tracking-wide: 0.06em; /* ---------- Spacing scale (4px base) ---------- */ --ukch-space-1: 4px; --ukch-space-2: 8px; --ukch-space-3: 12px; --ukch-space-4: 16px; --ukch-space-5: 20px; --ukch-space-6: 24px; --ukch-space-7: 32px; --ukch-space-8: 40px; --ukch-space-9: 48px; --ukch-space-10: 64px; --ukch-space-11: 80px; --ukch-space-12: 112px; --ukch-section-y: clamp(64px, 8vw, 112px); --ukch-container-pad: clamp(16px, 3vw, 32px); /* ---------- Radius ---------- */ --ukch-radius-xs: 4px; --ukch-radius-sm: 8px; --ukch-radius-md: 12px; --ukch-radius-lg: 16px; --ukch-radius-xl: 20px; --ukch-radius-pill: 999px; /* ---------- Shadows (elevation scale) ---------- */ --ukch-shadow-1: 0 1px 2px rgba(28, 28, 30, 0.04), 0 1px 1px rgba(28, 28, 30, 0.04); --ukch-shadow-2: 0 4px 12px rgba(28, 28, 30, 0.06), 0 2px 4px rgba(28, 28, 30, 0.04); --ukch-shadow-3: 0 8px 24px rgba(28, 28, 30, 0.10), 0 4px 8px rgba(28, 28, 30, 0.05); --ukch-shadow-4: 0 16px 40px rgba(28, 28, 30, 0.14), 0 6px 12px rgba(28, 28, 30, 0.06); --ukch-shadow-focus: 0 0 0 3px rgba(207, 163, 98, 0.30); --ukch-shadow-focus-danger: 0 0 0 3px rgba(184, 69, 63, 0.30); /* ---------- Container max-widths ---------- */ --ukch-max-narrow: 720px; --ukch-max-default: 1200px; --ukch-max-wide: 1320px; /* ---------- Breakpoints (for reference / clamp ranges) ---------- */ --ukch-bp-sm: 480px; --ukch-bp-md: 768px; --ukch-bp-lg: 1024px; --ukch-bp-xl: 1200px; /* ---------- Motion ---------- */ --ukch-duration-fast: 150ms; --ukch-duration-base: 250ms; --ukch-duration-slow: 400ms; --ukch-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --ukch-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --ukch-easing-bounce: cubic-bezier(0.4, 1.3, 0.4, 1); /* ---------- Z-index ---------- */ --ukch-z-base: 1; --ukch-z-dropdown: 1000; --ukch-z-sticky: 1020; --ukch-z-fixed: 1030; --ukch-z-overlay: 1040; --ukch-z-drawer: 1050; --ukch-z-modal: 1060; --ukch-z-toast: 1080; /* ---------- Aliases for legacy per-component tokens ---------- * The 2026 redesign files declare scoped variables like --hp-gold, * --cp-gold, --ck-gold, --l-gold, --ma-gold, --w-gold, --f-gold, * --c-gold, --cd-gold (cart-drawer), --h-gold (header). We re-bind * them here so any component that hasn't been refactored to read * --ukch-* still gets the canonical brand value. Cleaner than * find-and-replace across 10 component files. */ --hp-gold: var(--ukch-color-gold); --hp-gold-dark: var(--ukch-color-gold-dark); --hp-ink: var(--ukch-color-ink); --hp-muted: var(--ukch-color-muted); --hp-ivory: var(--ukch-color-ivory); --cp-gold: var(--ukch-color-gold); --cp-gold-dark: var(--ukch-color-gold-dark); --cp-ink: var(--ukch-color-ink); --cp-muted: var(--ukch-color-muted); --cp-ivory: var(--ukch-color-ivory); --ck-gold: var(--ukch-color-gold); --ck-gold-dark: var(--ukch-color-gold-dark); --ck-ink: var(--ukch-color-ink); --ck-muted: var(--ukch-color-muted); --ck-ivory: var(--ukch-color-ivory); --ck-success: var(--ukch-color-success); --ck-danger: var(--ukch-color-danger); --l-gold: var(--ukch-color-gold); --l-ink: var(--ukch-color-ink); --l-muted: var(--ukch-color-muted); --l-ivory: var(--ukch-color-ivory); --l-radius: var(--ukch-radius-lg); --ma-gold: var(--ukch-color-gold); --ma-gold-dark: var(--ukch-color-gold-dark); --ma-ink: var(--ukch-color-ink); --ma-muted: var(--ukch-color-muted); --ma-ivory: var(--ukch-color-ivory); --w-gold: var(--ukch-color-gold); --w-ink: var(--ukch-color-ink); --w-ivory: var(--ukch-color-ivory); --f-gold: var(--ukch-color-gold); --c-gold: var(--ukch-color-gold); --c-ink: var(--ukch-color-ink); --c-ivory: var(--ukch-color-ivory); --cd-gold: var(--ukch-color-gold); --cd-ink: var(--ukch-color-ink); --h-gold: var(--ukch-color-gold); --h-ink: var(--ukch-color-ink); --faq-gold: var(--ukch-color-gold); --faq-ink: var(--ukch-color-ink); --faq-ivory: var(--ukch-color-ivory); } /* Dark mode overrides — applied when `body.dark-mode` toggle is active. * Existing 2026 component CSS already scopes `body.dark-mode .scope { ... }` * blocks; this block keeps the global brand tokens consistent in dark. */ body.dark-mode { --ukch-color-paper: #1a1a1c; --ukch-color-ivory: #181818; --ukch-color-ivory-warm: #20201d; --ukch-color-ink: #f2eadd; --ukch-color-ink-soft: #c8c0b3; --ukch-color-muted: #b8aea0; --ukch-color-line: #2c2c2e; --ukch-color-gold-bg: rgba(207, 163, 98, 0.14); --ukch-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30); --ukch-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.40); --ukch-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.50); --ukch-shadow-4: 0 16px 40px rgba(0, 0, 0, 0.60); } /* Respect users who prefer reduced motion — collapse our durations to * effectively zero so transitions don't fire (browsers still flip state * synchronously). */ @media (prefers-reduced-motion: reduce) { :root { --ukch-duration-fast: 1ms; --ukch-duration-base: 1ms; --ukch-duration-slow: 1ms; } }