/** * CovPDB — design tokens * --------------------------------------------------------------------------- * Single source of truth for colour, spacing, radius and elevation. * Loaded from base.html BEFORE every other stylesheet, so main.css, * style.css and extras.css can all read from it. * * Palette: deep scientific navy, amber as the single accent. * To retheme the whole site, edit the RAMPS block only — everything * downstream is expressed in terms of the semantic aliases below it. */ :root { /* --------------------------------------------------------------- RAMPS — raw colour values. Edit here to retheme. --------------------------------------------------------------- */ /* Navy: primary brand ramp. 900 is the deep anchor, 500 the bright interactive tone, 50-200 are wash tints for backgrounds. */ --c-navy-950: #0b2440; --c-navy-900: #123a5e; --c-navy-800: #17486f; --c-navy-700: #1c5f8a; --c-navy-600: #24729f; --c-navy-500: #2e8bc0; --c-navy-400: #5aa8d3; --c-navy-300: #8ec8e6; --c-navy-200: #c2e0f0; --c-navy-100: #e3f0f8; --c-navy-50: #f1f7fb; /* Amber: the one accent. Used for emphasis, active markers and highlights — never as a large fill. 600 is the text-safe tone (amber-500 on white fails contrast for body text). */ --c-amber-700: #8a5a06; --c-amber-600: #b87a0a; --c-amber-500: #e8a317; --c-amber-400: #f3bb4d; --c-amber-200: #fae2ab; --c-amber-100: #fdf3dd; /* Ink: neutral ramp for text, borders and dividers. Slightly blue-shifted so it sits with the navy rather than fighting it. */ --c-ink-900: #10202f; --c-ink-800: #1f2a37; --c-ink-700: #374151; --c-ink-600: #4b5563; --c-ink-500: #6b7280; --c-ink-400: #9aa4b2; --c-ink-300: #cbd2da; --c-ink-200: #e3e8ee; --c-ink-100: #eef1f5; --c-ink-50: #f5f7fa; --c-white: #ffffff; /* Status colours. Kept deliberately desaturated so they read as data, not as alerts. */ --c-success: #1f8a52; --c-success-bg: #e6f4ec; --c-danger: #c0392b; --c-danger-bg: #fbeae8; --c-warning: var(--c-amber-600); --c-warning-bg: var(--c-amber-100); /* --------------------------------------------------------------- SEMANTIC ALIASES — what the rest of the CSS should actually use. --------------------------------------------------------------- */ --c-primary: var(--c-navy-700); --c-primary-dark: var(--c-navy-900); --c-primary-darker: var(--c-navy-950); --c-primary-light: var(--c-navy-500); --c-primary-wash: var(--c-navy-100); --c-primary-wash-2: var(--c-navy-50); --c-accent: var(--c-amber-500); --c-accent-text: var(--c-amber-600); --c-accent-wash: var(--c-amber-100); /* Surfaces */ --c-page: var(--c-ink-50); --c-surface: var(--c-white); --c-surface-2: var(--c-ink-100); --c-surface-sunken: var(--c-navy-50); /* Text */ --c-text: var(--c-ink-800); --c-text-muted: var(--c-ink-500); --c-text-subtle: var(--c-ink-400); --c-text-invert: var(--c-white); --c-heading: var(--c-navy-900); /* Lines */ --c-border: var(--c-ink-200); --c-border-strong: var(--c-ink-300); --c-divider: var(--c-ink-100); /* Interactive */ --c-link: var(--c-navy-700); --c-link-hover: var(--c-navy-500); --c-focus-ring: color-mix(in srgb, var(--c-navy-500) 45%, transparent); /* Chrome */ --c-header-bg: var(--c-navy-900); --c-header-bg-alt: var(--c-navy-950); --c-nav-link: rgba(255, 255, 255, 0.78); --c-nav-link-hover: var(--c-white); --c-nav-marker: var(--c-amber-500); --c-footer-bg: var(--c-navy-950); --c-footer-text: rgba(255, 255, 255, 0.72); --c-footer-heading: var(--c-white); /* --------------------------------------------------------------- DATA / CATEGORICAL — chart series identity. --------------------------------------------------------------- Fixed slot order. Assign slot 1, 2, 3 … in sequence and NEVER cycle: a 9th series folds into "Other" or becomes small multiples. Colour follows the entity, never its rank — filtering a series out must not repaint the survivors. Validated (OKLab ΔE×100, Machado 2009 severity-1.0, white surface): lightness band PASS chroma floor PASS CVD separation PASS worst adjacent 12.4 (protan), target 8.0 normal-vision PASS worst adjacent 19.8, floor 15.0 contrast PASS all 8 >= 3.0:1 Re-run before changing any value: validate_palette.js "" --mode light --surface "#ffffff" The ORDER is load-bearing — it is what clears the separation gates. Re-ordering these requires re-running the validator. */ --series-1: #2a78d6; /* blue — anchored to the navy brand ramp */ --series-2: #d9631a; /* orange */ --series-3: #11998a; /* teal */ --series-4: #c98500; /* amber */ --series-5: #d65b93; /* magenta */ --series-6: #2f7d32; /* green */ --series-7: #4a3aa7; /* violet */ --series-8: #d43b36; /* red */ /* Sequential ramp for magnitude — one hue, light to dark. Uses the navy ramp so magnitude reads as "more brand", not a new category. */ --seq-1: var(--c-navy-100); --seq-2: var(--c-navy-300); --seq-3: var(--c-navy-500); --seq-4: var(--c-navy-700); --seq-5: var(--c-navy-900); /* Chart furniture. Deliberately recessive — grid and axis must never compete with the marks. Text wears ink tokens, never a series colour. */ --chart-surface: var(--c-surface); --chart-grid: var(--c-ink-200); --chart-axis: var(--c-ink-300); --chart-label: var(--c-ink-500); --chart-gap: var(--c-surface); /* 2px spacer between adjacent fills */ /* --------------------------------------------------------------- SCALE — spacing, radius, elevation, type. --------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* Elevation: navy-tinted rather than neutral black, so cards sit in the palette instead of looking greyed out. */ --sh-sm: 0 1px 2px rgba(18, 58, 94, 0.06), 0 1px 3px rgba(18, 58, 94, 0.08); --sh-md: 0 2px 4px rgba(18, 58, 94, 0.06), 0 4px 12px rgba(18, 58, 94, 0.10); --sh-lg: 0 4px 8px rgba(18, 58, 94, 0.07), 0 12px 28px rgba(18, 58, 94, 0.13); --header-h: 70px; --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-head: "Raleway", "Open Sans", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }