/* Plume ยท shared design tokens. Approved atlas direction, September 28, 2026. See docs/DESIGN.md. Brand accents are decorative, never risk classifications. Legacy semantic tokens remain for existing evidence components; their names do not authorize clean/no-risk conclusions or report bands. */ :root { color-scheme: light; /* Approved brand palette; older aliases keep existing components aligned. */ --ink: #292b29; --paper: #f4f0e7; --brand-red: #a35643; --atlas-blue: #809da7; /* decorative water; not small text */ --petrol-900: var(--ink); --petrol-700: #42473f; --petrol-link: #405d68; --plume-orange: var(--brand-red); --plume-orange-strong: #864431; --map-green: #4E6E63; --review-rust: #B23A14; --monitor-amber:#A97722; --slate: #5D7076; --ink-900: var(--ink); --ink-700: #414643; --ink-500: #60645c; --ink-300: #67685f; --ink-150: #b8b1a3; --paper-0: #faf8f2; --paper-50: #faf8f2; --paper-100:var(--paper); --paper-200:#ebe6db; --paper-300:#d7d1c4; /* ===== Semantic result states ===== */ /* Legacy CLEAR tokens: never use to imply that a property is clean. */ --clear: var(--map-green); --clear-strong: #3F5A50; --clear-surface:color-mix(in oklab, var(--map-green) 11%, var(--paper-0)); --clear-border: color-mix(in oklab, var(--map-green) 34%, var(--paper-100)); --clear-text: #35493F; /* REVIEW โ€” review recommended / high priority */ --review: var(--review-rust); --review-strong: #952F0F; --review-surface:color-mix(in oklab, var(--review-rust) 10%, var(--paper-0)); --review-border: color-mix(in oklab, var(--review-rust) 36%, var(--paper-100)); --review-text: #8F2E10; /* CAUTION โ€” monitor */ --caution: var(--monitor-amber); --caution-strong: #8F651D; --caution-surface:color-mix(in oklab, var(--monitor-amber) 12%, var(--paper-0)); --caution-border: color-mix(in oklab, var(--monitor-amber) 38%, var(--paper-100)); --caution-text: #77541A; /* DATA GAP โ€” partial / not loaded / not evaluated / no matching records. Slate hue + a diagonal hatch fill. NEVER a calm flat block. */ --gap: var(--slate); --gap-strong: #4B5B60; --gap-surface:color-mix(in oklab, var(--slate) 9%, var(--paper-0)); --gap-border: color-mix(in oklab, var(--slate) 40%, var(--paper-100)); --gap-text: #47585E; --gap-hatch: color-mix(in oklab, var(--slate) 22%, transparent); /* The signature data-gap fill: diagonal hatch over a faint wash. Apply to any element representing missing / partial / unloaded data. */ --pattern-data-gap: repeating-linear-gradient(135deg, var(--gap-hatch) 0, var(--gap-hatch) 1.5px, transparent 1.5px, transparent 9px), var(--gap-surface); /* The data-gap "rail" treatment: the slate hatch is confined to a solid left edge band so the card body stays clean and fully legible, while the gap signal (slate + hatch, never calm) is impossible to miss. Use on wide rows/cards where hatch behind prose would hurt reading. */ --gap-rail-width: 6px; --pattern-data-gap-rail: repeating-linear-gradient(135deg, color-mix(in oklab, var(--paper-0) 52%, transparent) 0, color-mix(in oklab, var(--paper-0) 52%, transparent) 1.5px, transparent 1.5px, transparent 7px) left top / var(--gap-rail-width) 100% no-repeat, linear-gradient(var(--gap), var(--gap)) left top / var(--gap-rail-width) 100% no-repeat, var(--surface-card); /* ---- Functional aliases ---- */ --text-primary: var(--ink-900); --text-secondary: var(--ink-500); --text-muted: var(--ink-300); --text-on-ink: var(--paper-100); --surface-page: var(--paper-100); --surface-card: var(--paper-0); --surface-field: var(--paper-200); --rule: var(--paper-300); --rule-strong: var(--ink-150); --accent: var(--plume-orange); --plume-accent: var(--plume-orange); /* brand-mark plume arcs */ --focus-ring: var(--brand-red); /* ---- Typography ---- */ --font-serif: Georgia, 'Times New Roman', serif; --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --text-display: 40px; /* report title */ --text-h1: 28px; /* section heads */ --text-h2: 21px; /* sub-section / category title */ --text-h3: 17px; /* card title */ --text-body: 15px; /* prose */ --text-sm: 13px; /* secondary / dense rows */ --text-xs: 11.5px;/* captions, source notes */ --data-lg: 16px; --data-md: 14px; --data-sm: 12px; --label-size: 11px; --label-track: 0.13em; --leading-tight: 1.18; --leading-snug: 1.34; --leading-body: 1.55; /* ---- Spacing & layout (4px grid) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --measure: 680px; /* readable prose width */ --report-width: 816px; /* US-Letter content column (8.5in @ 96dpi) */ --report-pad: 56px; /* page inset */ --gutter: 24px; /* ---- Elevation, borders, radii ---- */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px; --radius-pill: 999px; --border-hair: 1px; --border-med: 1.5px; --border-heavy:2px; --shadow-flat: none; --shadow-card: 0 1px 2px color-mix(in oklab, var(--ink) 8%, transparent); --shadow-raised: 0 2px 8px color-mix(in oklab, var(--ink) 12%, transparent), 0 1px 2px color-mix(in oklab, var(--ink) 10%, transparent); --shadow-overlay:0 12px 32px color-mix(in oklab, var(--ink) 22%, transparent), 0 2px 8px color-mix(in oklab, var(--ink) 14%, transparent); --focus-width: 2px; --focus-offset: 2px; /* ---- Back-compat aliases ---- Older selectors (brand reference page, autocomplete) still read these names. Map them onto the new system so nothing loses its styling. */ --ink-soft: var(--ink-700); --muted: var(--text-muted); --line: var(--rule); --line-strong: var(--rule-strong); --bg: var(--surface-page); --panel: var(--surface-card); --panel-alt: var(--paper-200); --map: var(--map-green); --map-dark: var(--clear-strong); --amber: var(--monitor-amber); --rust: var(--review-rust); --shadow: var(--shadow-raised); --go: var(--map-green); --stop: var(--review-rust); } /* Reusable editorial overline. Reserve monospace for record identifiers. */ .strata-label { font-family: var(--font-sans); font-size: var(--label-size); font-weight: var(--fw-medium); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--text-muted); }