/* ============================================================= River Atlas — DESIGN TOKENS ============================================================= This is THE config file for the look of the site. Every colour, font, size, radius, shadow and timing used anywhere on the site resolves back to a variable declared here. Rules of the road: 1. No raw hex / px values in any other stylesheet. 2. Layer 1 = raw palette (the "paint tins"). Layer 2 = semantic tokens (what the paint is used FOR). Components only ever use Layer 2. 3. To re-skin the site, edit Layer 1 + Layer 2 and nothing else. 4. `.invert` re-points the semantic tokens for dark sections, so components never need a dark variant of their own. ============================================================= */ :root { /* ----------------------------------------------------------- LAYER 1 — RAW PALETTE Rename/replace freely; only Layer 2 should reference these. ----------------------------------------------------------- */ /* Deep water — dark surfaces */ --rv-navy-950: #04121d; --rv-navy-900: #072436; --rv-navy-800: #0c3349; --rv-navy-700: #12455f; /* River — primary accent */ --rv-teal-700: #0a6a78; --rv-teal-600: #0e8494; --rv-teal-500: #12a3b4; --rv-teal-400: #35c2d0; --rv-teal-300: #7bdbe5; --rv-teal-100: #dcf4f7; /* Quay — warm secondary accent */ --rv-sand-600: #b9862c; --rv-sand-500: #dda63c; --rv-sand-200: #f6e6c4; /* Neutrals */ --rv-gray-0: #ffffff; --rv-gray-50: #f6f9fa; --rv-gray-100: #eef3f5; --rv-gray-200: #dde5ea; --rv-gray-300: #c2ced6; --rv-gray-500: #7c8c96; --rv-gray-600: #5c6d78; --rv-gray-700: #3d4e59; --rv-gray-900: #16242d; /* Status */ --rv-green-500: #1f9d63; --rv-amber-500: #d99022; --rv-red-500: #c8503f; /* ----------------------------------------------------------- LAYER 2 — SEMANTIC TOKENS (use these in components) ----------------------------------------------------------- */ /* Surfaces */ --color-bg: var(--rv-gray-0); --color-bg-subtle: var(--rv-gray-50); --color-surface: var(--rv-gray-0); --color-surface-sunken: var(--rv-gray-100); /* Text */ --color-text: var(--rv-gray-900); --color-text-muted: var(--rv-gray-600); --color-text-faint: var(--rv-gray-500); --color-heading: var(--rv-navy-900); /* Lines */ --color-border: var(--rv-gray-200); --color-border-strong: var(--rv-gray-300); /* Accent */ --color-accent: var(--rv-teal-600); --color-accent-hover: var(--rv-teal-700); --color-accent-soft: var(--rv-teal-100); --color-accent-contrast: var(--rv-gray-0); /* Secondary accent */ --color-accent-2: var(--rv-sand-600); --color-accent-2-soft: var(--rv-sand-200); /* Status */ --color-success: var(--rv-green-500); --color-warning: var(--rv-amber-500); --color-danger: var(--rv-red-500); /* Focus ring */ --color-focus: var(--rv-teal-500); /* ----------------------------------------------------------- TYPOGRAPHY Swap the two stacks below to change every typeface on the site. If you add a webfont, load it in index.html and put its family first in the relevant stack. ----------------------------------------------------------- */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-display: var(--font-sans); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.55; --leading-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-wide: 0.02em; --tracking-caps: 0.12em; /* Fluid type scale — min at 360px viewport, max at 1280px */ --text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem); --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --text-lg: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); --text-xl: clamp(1.5rem, 1.32rem + 0.8vw, 2rem); --text-2xl: clamp(1.875rem, 1.55rem + 1.4vw, 2.75rem); --text-3xl: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem); /* ----------------------------------------------------------- SPACE — single scale, used for padding, margin and gaps ----------------------------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 8rem; /* ----------------------------------------------------------- LAYOUT ----------------------------------------------------------- */ --container-max: 72rem; /* 1152px */ --container-narrow: 46rem; /* prose / centred intros */ --container-pad: clamp(1.25rem, 4vw, 2.5rem); --section-space: clamp(3.5rem, 8vw, 7rem); --grid-gap: clamp(1.25rem, 3vw, 2rem); --header-height: 4.5rem; /* ----------------------------------------------------------- SHAPE & DEPTH ----------------------------------------------------------- */ --radius-xs: 0.25rem; --radius-sm: 0.5rem; --radius-md: 0.875rem; --radius-lg: 1.25rem; --radius-xl: 1.75rem; --radius-full: 999rem; --border-width: 1px; --focus-ring-width: 2px; --focus-ring-offset: 2px; --lift: 2px; /* how far cards/buttons rise on hover */ --blur-header: 12px; /* frosted-glass strength behind the header */ --shadow-sm: 0 1px 2px rgb(4 18 29 / 6%), 0 1px 3px rgb(4 18 29 / 4%); --shadow-md: 0 4px 12px rgb(4 18 29 / 7%), 0 2px 4px rgb(4 18 29 / 4%); --shadow-lg: 0 18px 40px rgb(4 18 29 / 12%), 0 4px 12px rgb(4 18 29 / 6%); --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-focus) 40%, transparent); /* ----------------------------------------------------------- MOTION ----------------------------------------------------------- */ --ease: cubic-bezier(0.32, 0.72, 0.28, 1); --dur-fast: 120ms; --dur-base: 240ms; --dur-slow: 600ms; /* ----------------------------------------------------------- STACKING ----------------------------------------------------------- */ --z-base: 1; --z-sticky: 50; --z-header: 100; --z-overlay: 200; } /* ============================================================= INVERTED CONTEXT Add class="invert" to any section to flip it to the dark palette. Components inside inherit automatically because they only ever read the semantic tokens. ============================================================= */ .invert { --color-bg: var(--rv-navy-950); --color-bg-subtle: var(--rv-navy-900); --color-surface: var(--rv-navy-900); --color-surface-sunken: var(--rv-navy-800); --color-text: var(--rv-gray-100); --color-text-muted: var(--rv-teal-100); --color-text-faint: var(--rv-gray-300); --color-heading: var(--rv-gray-0); --color-border: color-mix(in srgb, var(--rv-teal-300) 18%, transparent); --color-border-strong: color-mix(in srgb, var(--rv-teal-300) 32%, transparent); --color-accent: var(--rv-teal-400); --color-accent-hover: var(--rv-teal-300); --color-accent-soft: color-mix(in srgb, var(--rv-teal-400) 16%, transparent); --color-accent-contrast: var(--rv-navy-950); --color-accent-2: var(--rv-sand-500); --color-accent-2-soft: color-mix(in srgb, var(--rv-sand-500) 18%, transparent); --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%); --shadow-md: 0 6px 18px rgb(0 0 0 / 32%); --shadow-lg: 0 24px 50px rgb(0 0 0 / 40%); color: var(--color-text); background-color: var(--color-bg); }