/* ========================================================================= Barázda — design tokens ------------------------------------------------------------------------- THIS FILE MUST BE LINKED FIRST. The @layer statement below fixes the cascade order for the whole site, so after this line the order of the remaining tags stops deciding specificity. THEMING Light and dark values sit on adjacent lines via light-dark(), so a pair can never drift apart during maintenance. Each is preceded by a plain light-only declaration: browsers without light-dark() ignore the second line and get a complete, correct light theme. --surface-page: #F2F5F0; <- fallback --surface-page: light-dark(#F2F5F0, #0E1513); <- themed Which side light-dark() picks is driven by `color-scheme`, set on :root below. `data-theme` is written to ONLY for an explicit user choice; absent means "follow the OS". Any future theme (see docs/DESIGN-TOKENS.md) adds one `:root[data-theme="x"]` block and overrides tokens only. ========================================================================= */ @layer reset, tokens, base, layout, components, pages, utilities; @layer tokens { :root { color-scheme: light dark; /* ===================================================================== SURFACES The page is never pure white — raised panels need something to rise from. In dark, wells sink BELOW the page rather than rising, which preserves the light-mode mental model instead of inverting it. ===================================================================== */ --surface-page: #f2f5f0; --surface-page: light-dark(#f2f5f0, #0e1513); --surface-raised: #ffffff; --surface-raised: light-dark(#ffffff, #16201c); --surface-raised-2: #fbfcfa; --surface-raised-2: light-dark(#fbfcfa, #1c2822); --surface-sunken: #e7ebe3; --surface-sunken: light-dark(#e7ebe3, #0a100e); --surface-subtle: #edf0e9; --surface-subtle: light-dark(#edf0e9, #1a251f); --surface-inverse: #16201c; --surface-inverse: light-dark(#16201c, #e9efe9); --text-on-inverse: #e9efe9; --text-on-inverse: light-dark(#e9efe9, #14201a); --overlay-scrim: rgba(16, 24, 19, 0.55); --overlay-scrim: light-dark(rgba(16, 24, 19, 0.55), rgba(4, 8, 6, 0.66)); /* ===================================================================== TEXT Ratios are against --surface-raised. --text-muted is deliberately tuned to clear 4.5:1 on EVERY surface in the set, including the lightest dark surface (--surface-raised-2), which is the binding case. ===================================================================== */ --text-primary: #14201a; --text-primary: light-dark(#14201a, #e4eae4); --text-secondary: #44514a; --text-secondary: light-dark(#44514a, #afbbb2); /* Tuned against the MESH-COMPOSITED hero background, not the flat page token. body::before lays a green/earth gradient mesh over everything, which at its origin corners shifts the paper enough to drag the original #5E6A61 down to 4.4:1. Measured worst case now 4.6:1 across page, raised, raised-2, sunken, subtle AND the mesh peak. */ --text-muted: #5b675e; --text-muted: light-dark(#5b675e, #8c9a8f); --text-disabled: #8b968d; --text-disabled: light-dark(#8b968d, #5e6b62); --text-link: #2c5c42; --text-link: light-dark(#2c5c42, #8fbe9c); --text-link-hover: #1e4530; --text-link-hover: light-dark(#1e4530, #a8d0b3); /* ===================================================================== BORDERS --border-subtle and --border-default are DECORATIVE. Only --border-strong may carry a control boundary on its own; it is the one tuned to pass WCAG 2.2 SC 1.4.11 (3:1) in both themes. ===================================================================== */ --border-subtle: #dce2d6; --border-subtle: light-dark(#dce2d6, #24302a); --border-default: #c4cdbd; --border-default: light-dark(#c4cdbd, #33403a); /* Same correction as --text-muted: measured worst case 3.16:1 including over the mesh peak, against the 3:1 non-text requirement. */ --border-strong: #758177; --border-strong: light-dark(#758177, #6e7e71); --border-brand: #3d6647; --border-brand: light-dark(#3d6647, #4e8462); /* ===================================================================== BRAND — a cultivated, chlorophyll-dulled green, not a startup green. The raw ramp is for charts and one-off tints; use the ROLE tokens (brand-solid / brand-fg / brand-wash) for anything structural. ===================================================================== */ --brand-050: #edf2ec; --brand-100: #d8e3d8; --brand-200: #b4c8b7; --brand-300: #85a68c; --brand-400: #5a8365; --brand-500: #3d6647; --brand-600: #2f5238; --brand-700: #234029; --brand-800: #16291c; --brand-900: #0e1d14; --brand-solid: #3d6647; --brand-solid: light-dark(#3d6647, #367049); --brand-solid-hover: #345a3e; --brand-solid-hover: light-dark(#345a3e, #3e7e53); --brand-solid-active: #2a4b33; --brand-solid-active: light-dark(#2a4b33, #2c5d3d); --on-brand: #ffffff; --on-brand: light-dark(#ffffff, #f1f6f1); --brand-fg: #2c5c42; --brand-fg: light-dark(#2c5c42, #8fbe9c); --brand-wash: #edf2ec; --brand-wash: light-dark(#edf2ec, #142219); --brand-border: #b4c8b7; --brand-border: light-dark(#b4c8b7, #2e4a36); /* ===================================================================== ACCENT — terracotta, the colour of contour ink on an ordnance map. Rationed on purpose: roughly 3% of any screen. Never the primary action, never a status colour. ===================================================================== */ --accent-050: #faf0e9; --accent-100: #f2ddce; --accent-300: #dca482; --accent-500: #b0603a; --accent-600: #8e4a2a; --accent-700: #6e3820; --accent-solid: #b0603a; --accent-solid: light-dark(#b0603a, #a85b33); --accent-solid-hover: #9b5232; --accent-solid-hover: light-dark(#9b5232, #bc6b3f); --on-accent: #ffffff; --on-accent: light-dark(#ffffff, #fdf2ea); --accent-fg: #8e4a2a; --accent-fg: light-dark(#8e4a2a, #d98f63); --accent-wash: #faf0e9; --accent-wash: light-dark(#faf0e9, #221711); --accent-border: #dca482; --accent-border: light-dark(#dca482, #5e3a24); /* ===================================================================== SEMANTIC STATUS Success sits at higher chroma than brand-500 so "healthy" never reads as "branded". Warning amber (hue ~45) and danger crimson (hue ~8) are separated from the terracotta accent (hue ~24) by hue AND lightness. ===================================================================== */ --success-fg: #1f6b41; --success-fg: light-dark(#1f6b41, #6dba88); --success-solid: #2a7d4e; --success-solid: light-dark(#2a7d4e, #35855a); --success-surface: #e3efe7; --success-surface: light-dark(#e3efe7, #12231a); --success-border: #a9c9b5; --success-border: light-dark(#a9c9b5, #2c4936); --warning-fg: #8a5a0b; --warning-fg: light-dark(#8a5a0b, #e3b04a); --warning-solid: #c88a14; --warning-solid: light-dark(#c88a14, #b5820f); --warning-surface: #f8efd9; --warning-surface: light-dark(#f8efd9, #241d0f); --warning-border: #e2c67e; --warning-border: light-dark(#e2c67e, #4e3f17); --danger-fg: #b32d22; --danger-fg: light-dark(#b32d22, #f0897c); --danger-solid: #b32d22; --danger-solid: light-dark(#b32d22, #9e2c22); --danger-surface: #f8e5e2; --danger-surface: light-dark(#f8e5e2, #241412); --danger-border: #e4a79e; --danger-border: light-dark(#e4a79e, #55261f); --info-fg: #1f5c7a; --info-fg: light-dark(#1f5c7a, #6fb6d6); --info-solid: #24688a; --info-solid: light-dark(#24688a, #1e5e7e); --info-surface: #e2edf3; --info-surface: light-dark(#e2edf3, #101f27); --info-border: #a3c4d7; --info-border: light-dark(#a3c4d7, #29465a); --neutral-fg: #4a554d; --neutral-fg: light-dark(#4a554d, #9aa79e); --neutral-solid: #6b776e; --neutral-solid: light-dark(#6b776e, #6e7c73); --neutral-surface: #e9ece6; --neutral-surface: light-dark(#e9ece6, #1a231e); --neutral-border: #c7cfc3; --neutral-border: light-dark(#c7cfc3, #34413a); /* ===================================================================== MODULE STATUS ALIASES The module registry uses these names, never the semantic ones, so a future status vocabulary change touches this block only. Status is NEVER colour alone: live = filled dot, beta = hollow dot, roadmap = dashed border — plus the word itself, always. ===================================================================== */ --status-live-fg: var(--success-fg); --status-live-surface: var(--success-surface); --status-live-border: var(--success-border); --status-live-dot: var(--success-solid); --status-beta-fg: var(--warning-fg); --status-beta-surface: var(--warning-surface); --status-beta-border: var(--warning-border); --status-beta-dot: var(--warning-solid); --status-roadmap-fg: var(--info-fg); --status-roadmap-surface: var(--info-surface); --status-roadmap-border: var(--info-border); --status-roadmap-dot: var(--info-solid); --status-deprecated-fg: var(--neutral-fg); --status-deprecated-surface: var(--neutral-surface); --status-deprecated-border: var(--neutral-border); --status-deprecated-dot: var(--neutral-solid); /* ===================================================================== FOCUS The composite --shadow-focus draws an inner halo in the surface colour then the ring itself, which guarantees >=3:1 somewhere in the ring on top of ANY fill in the system — including brand-solid, against which the light-mode ring alone is only 1.3:1. ===================================================================== */ --focus-ring: #0f5a38; --focus-ring: light-dark(#0f5a38, #9cc7a8); --focus-ring-offset: #ffffff; --focus-ring-offset: light-dark(#ffffff, #0e1513); --focus-ring-width: 2px; --focus-ring-gap: 2px; --selection-bg: #d8e3d8; --selection-bg: light-dark(#d8e3d8, #2e4a36); --selection-fg: #14201a; --selection-fg: light-dark(#14201a, #e4eae4); /* ===================================================================== DATA VISUALISATION Blue anchors the ramp so green is not forced to be series 1 (it is the brand colour and would read as "the important one"). 1-2-3 ordering is deuteranopia-safe by lightness stepping. ===================================================================== */ --data-1: #2f6c8f; --data-1: light-dark(#2f6c8f, #63a8ce); --data-2: #b0603a; --data-2: light-dark(#b0603a, #d98f63); --data-3: #4c7a55; --data-3: light-dark(#4c7a55, #79b489); --data-4: #8a5fa3; --data-4: light-dark(#8a5fa3, #b08ac9); --data-5: #a9852b; --data-5: light-dark(#a9852b, #cfaa4e); --data-6: #4a6b77; --data-6: light-dark(#4a6b77, #7e9aa6); --chart-grid: #dce2d6; --chart-grid: light-dark(#dce2d6, #24302a); --chart-axis: #7f8d82; --chart-axis: light-dark(#7f8d82, #5c6e60); /* ===================================================================== TEXTURES — the page's personality, all pure CSS/SVG, zero image files. Contour strokes must LIFT in dark or they disappear entirely. ===================================================================== */ --texture-line: rgba(176, 96, 58, 0.1); --texture-line: light-dark(rgba(176, 96, 58, 0.1), rgba(217, 143, 99, 0.13)); --texture-grid: rgba(20, 32, 26, 0.055); --texture-grid: light-dark(rgba(20, 32, 26, 0.055), rgba(200, 220, 205, 0.05)); --texture-furrow: rgba(61, 102, 71, 0.07); --texture-furrow: light-dark(rgba(61, 102, 71, 0.07), rgba(143, 190, 156, 0.05)); /* In light these two just stop the paper reading flat; in dark they jump to 22%/13% and ARE the mechanism giving the near-black its green-cool cast, warming toward the top right. A re-theme, not an inversion. */ --mesh-a: rgba(61, 102, 71, 0.07); --mesh-a: light-dark(rgba(61, 102, 71, 0.07), rgba(54, 112, 73, 0.22)); --mesh-b: rgba(176, 96, 58, 0.05); --mesh-b: light-dark(rgba(176, 96, 58, 0.05), rgba(168, 91, 51, 0.13)); /* ===================================================================== TYPOGRAPHY — system stacks only. No @font-face anywhere: Chrome CORS-blocks font files loaded over file://, so a webfont would silently fall back on the owner's machine and shift the design between local and hosted. See docs/FILE-PROTOCOL.md. ===================================================================== */ --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; --font-size-display: clamp(2rem, 1.35rem + 2.9vw, 3.25rem); --font-size-h1: clamp(1.625rem, 1.28rem + 1.55vw, 2.375rem); --font-size-h2: clamp(1.3125rem, 1.13rem + 0.82vw, 1.75rem); --font-size-h3: clamp(1.125rem, 1.06rem + 0.29vw, 1.3125rem); --font-size-h4: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --font-size-body-lg: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --font-size-body: clamp(0.9375rem, 0.915rem + 0.11vw, 1rem); --font-size-body-sm: clamp(0.875rem, 0.86rem + 0.07vw, 0.9375rem); --font-size-caption: clamp(0.8125rem, 0.8rem + 0.06vw, 0.875rem); --font-size-overline: clamp(0.6875rem, 0.68rem + 0.04vw, 0.75rem); --font-size-metric: clamp(1.75rem, 1.28rem + 2.1vw, 2.75rem); --font-size-metric-sm: clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem); --font-size-data: clamp(0.8125rem, 0.8rem + 0.06vw, 0.875rem); --leading-tight: 1.05; --leading-heading: 1.2; --leading-body: 1.6; /* ===================================================================== SPACE & SIZE --size-control-h is 44px, not the 40px a desktop design would pick: these controls get used with a gloved thumb on a phone in a field. ===================================================================== */ --space-0: 0; --space-px: 1px; --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-gutter: clamp(1rem, 0.55rem + 2vw, 2rem); --space-section: clamp(2.75rem, 1.4rem + 5.2vw, 6rem); --space-card-pad: clamp(1rem, 0.8rem + 0.9vw, 1.5rem); --size-control-h: 2.75rem; --size-control-h-lg: 3rem; --size-control-h-sm: 2rem; --size-tap-min: 2.75rem; --size-icon: 1.25rem; --size-icon-sm: 1rem; --size-content-max: 84rem; --size-prose-max: 46rem; --size-min-viewport: 320px; /* ===================================================================== RADII / SHADOWS / MOTION / DEPTH ===================================================================== */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px; --radius-card: var(--radius-lg); --radius-control: var(--radius-md); --radius-chip: var(--radius-sm); /* light-dark() takes exactly two arguments, so it cannot wrap a comma-separated shadow list. Shadows are therefore composed from themed COLOUR tokens instead. --shadow-lift is fully transparent in light, which makes the inset highlight a no-op there while giving dark-mode panels the top edge that reads as "raised". */ --shadow-lift: rgba(230, 245, 235, 0); --shadow-lift: light-dark(rgba(230, 245, 235, 0), rgba(230, 245, 235, 0.045)); --shadow-ink-1: rgba(20, 32, 26, 0.06); --shadow-ink-1: light-dark(rgba(20, 32, 26, 0.06), rgba(0, 0, 0, 0.45)); --shadow-ink-2: rgba(20, 32, 26, 0.1); --shadow-ink-2: light-dark(rgba(20, 32, 26, 0.1), rgba(0, 0, 0, 0.55)); --shadow-ink-3: rgba(20, 32, 26, 0.18); --shadow-ink-3: light-dark(rgba(20, 32, 26, 0.18), rgba(0, 0, 0, 0.7)); --shadow-hairline: 0 0 0 1px var(--border-subtle); --shadow-xs: 0 1px 0 0 var(--shadow-ink-1); --shadow-sm: inset 0 1px 0 var(--shadow-lift), 0 1px 2px var(--shadow-ink-1), 0 1px 1px var(--shadow-ink-1); --shadow-md: inset 0 1px 0 var(--shadow-lift), 0 2px 4px -1px var(--shadow-ink-1), 0 8px 16px -6px var(--shadow-ink-2); --shadow-lg: inset 0 1px 0 var(--shadow-lift), 0 4px 8px -2px var(--shadow-ink-1), 0 20px 40px -14px var(--shadow-ink-3); --shadow-well: inset 0 1px 2px var(--shadow-ink-2); --shadow-focus: 0 0 0 var(--focus-ring-gap) var(--focus-ring-offset), 0 0 0 calc(var(--focus-ring-gap) + var(--focus-ring-width)) var(--focus-ring); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 400ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --z-base: 0; --z-sticky: 10; --z-dropdown: 20; --z-header: 30; --z-toast: 40; --z-modal: 50; } /* An explicit user choice pins color-scheme, which is what light-dark() reads. Absent attribute = follow the OS. Written by the pre-paint snippet in each page ; see assets/js/core.js for the runtime. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Motion tokens collapse rather than every animation being special-cased at its call site. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } } /* Windows High Contrast and forced-colours modes: hand the ring back to the system so it cannot be tinted out of visibility. */ @media (forced-colors: active) { :root { --focus-ring: Highlight; --focus-ring-offset: Canvas; } } }