/* * Design tokens: every colour, type size, space, radius, shadow and motion value the web app uses lives in this file and nowhere else. * To restyle Kleardata, edit only this file. app.css refers to these variables and contains no colour literals. * * Source: the Red Glasses design system v0.2 (docs/design/tokens.proposed.css). Colours use light-dark(, ), so each token is defined once. The theme follows the system unless the page sets * data-theme="light" or data-theme="dark" on (the toggle in the header does that). */ /* kleardata ยท Red Glasses design system v0.2 (louder: Bricolage display, highlighters, pop shadows) Proposed replacement for src/web/tokens.css. Same variable names, so app.css keeps working. Rule: brand red is always SOLID (logo, Publish button, minted ID text, active tab underline). Errors are always TINTED (pale background + crimson text + icon + a word). Never mix them. Fonts: self-host IBM Plex Sans 400/500/600 + IBM Plex Mono 400/500 (npm @fontsource/ibm-plex-sans, @fontsource/ibm-plex-mono) so the default-src 'self' CSP still holds. */ /* Metric-matched fallbacks: until the self-hosted fonts load (font-display: swap), text is drawn in Arial / Courier New scaled and re-spaced to the web font's metrics, so the swap moves almost nothing (layout shift). Measured in Chromium against the real files: Plex Sans 100.8% of Arial, Bricolage 800 103.9% of Arial Bold, Plex Mono 100% of Courier New. Ascent/descent = font metric / size-adjust. */ @font-face { font-family: "IBM Plex Sans Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); font-weight: 400 500; size-adjust: 100.8%; ascent-override: 101.7%; descent-override: 27.3%; line-gap-override: 0%; } @font-face { font-family: "IBM Plex Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); font-weight: 600 700; size-adjust: 100.8%; ascent-override: 101.7%; descent-override: 27.3%; line-gap-override: 0%; } @font-face { font-family: "Bricolage Grotesque Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); font-weight: 600 900; size-adjust: 103.9%; ascent-override: 89.5%; descent-override: 26%; line-gap-override: 0%; } @font-face { font-family: "IBM Plex Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"); font-weight: 400 500; size-adjust: 100%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%; } :root { color-scheme: light dark; /* Surfaces and text */ --color-bg: light-dark(#F5F6F8, #0C0F14); --color-surface: light-dark(#FFFFFF, #151922); --color-surface-sunken: light-dark(#EEF0F4, #10131A); --color-border: light-dark(#DDE1E8, #262C38); --color-border-strong: light-dark(#C3C9D4, #384052); --color-text: light-dark(#0E1726, #E9ECF2); --color-text-muted: light-dark(#4A5568, #A3ACBC); --color-text-faint: light-dark(#636B7D, #8790A2); /* Brand: red glasses. --color-accent is kept as an alias so existing rules still resolve. */ --color-brand: light-dark(#E11D2A, #FF4D55); --color-brand-strong: light-dark(#B3121C, #FF7A80); /* hover / pressed */ --color-on-brand: #FFFFFF; --color-accent: var(--color-brand); --color-accent-strong: var(--color-brand-strong); --color-on-accent: var(--color-on-brand); /* Note: no --color-accent-soft. A pale red tint is reserved for errors. */ /* Ink: every primary action except Publish */ --color-ink: light-dark(#0E1726, #E9ECF2); --color-on-ink: light-dark(#FFFFFF, #0C0F14); /* Links are ink, underlined; hover goes brand-strong */ --color-link: var(--color-text); --color-link-hover: var(--color-brand-strong); /* Minted ID chip: red mono on ink. Placeholder: dashed outline. */ --color-id-bg: light-dark(#0E1726, #1E2533); --color-id-text: #FF4D55; --color-id-placeholder: light-dark(#A0A8B8, #5A6377); /* Status: text / soft background pairs (all >= 4.5:1) */ --color-planned: light-dark(#4A5568, #B6BECC); --color-planned-soft: light-dark(#ECEEF2, #232835); --color-info: light-dark(#1F49C7, #A9BAFF); /* scheduled, info */ --color-info-soft: light-dark(#E6ECFF, #1C2650); --color-live: light-dark(#0F6B3E, #7BE0A6); /* live, on target */ --color-live-soft: light-dark(#DDF5E7, #123A26); --color-done: light-dark(#3D4A63, #AEB9CD); /* ended */ --color-done-soft: light-dark(#E3E8F0, #1F2633); --color-warn: light-dark(#8A4B00, #F6C46B); /* warning, under, over */ --color-warn-soft: light-dark(#FFF0D6, #3A2A0E); --color-bad: light-dark(#A61B2B, #FF9AA5); /* blocking, missing, cancelled */ --color-bad-soft: light-dark(#FDE4E6, #3E1519); /* Chart fills (coverage bars) */ --color-bar-ok: light-dark(#1E8A52, #4CC487); --color-bar-off: light-dark(#BF7410, #E0A040); /* light darkened from #C77A12: 2.96:1 on the bar track, now >= 3:1 (Phase 4) */ --color-bar-track: light-dark(#EEF0F4, #1E2330); --color-bar-target: var(--color-text); /* Timeline today line: ink, never red */ --color-today: var(--color-text); /* Focus: blue, distinct from brand and error */ --focus-ring-color: light-dark(#1F49C7, #8FA6FF); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* Highlighters: categorical tags for marketing stage / channel. Never status. Always ink text. */ --hl-awareness: #BFE3FF; /* sky */ --hl-consideration: #FFD3B8; /* peach */ --hl-conversion: #DCCBFF; /* lilac */ --hl-activation: #FFE57A; /* butter */ --hl-retention: #B8EDE3; /* aqua */ --hl-advocacy: #FFC6E4; /* bubblegum */ --hl-ink: #0E1726; /* Type */ --font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque Fallback", system-ui, sans-serif; /* titles, stats, wordmark; 700-800 */ --font-sans: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace; --text-xs: 0.75rem; /* 12 eyebrow, meta */ --text-sm: 0.8125rem; /* 13 labels, chips */ --text-md: 0.9375rem; /* 15 body */ --text-lg: 1.125rem; /* 18 card title */ --text-xl: 1.5rem; /* 24 section */ --text-2xl: 1.875rem; /* 30 page title */ --text-3xl: 3.5rem; /* 56 page hero title (display) */ --text-stat: 4rem; /* 64 stat figure (display 800) */ --weight-regular: 400; --weight-medium: 500; --weight-bold: 600; --weight-display: 800; --tracking-tight: -0.02em; --tracking-brand: -0.035em; --tracking-eyebrow: 0.08em; /* Space (4px base) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; /* Radii */ --radius-id: 0.25rem; --radius-sm: 0.625rem; /* controls */ --radius-md: 1rem; /* cards */ --radius-lg: 1.375rem; /* hero tiles */ --radius-pill: 999px; /* Depth: flat; shadows only for menus and dialogs */ --shadow-sm: 0 1px 2px rgb(14 23 38 / 0.06), 0 4px 12px rgb(14 23 38 / 0.06); --shadow-md: 0 12px 40px rgb(14 23 38 / 0.18); /* Pop: hard offset shadows + 2px ink border for things meant to be noticed (buttons, hero tiles). Not data cards. */ --border-pop: 2px solid light-dark(#0E1726, #E9ECF2); --pop-sm: 4px 4px 0 light-dark(#0E1726, #E9ECF2); --pop-lg: 8px 8px 0 light-dark(#0E1726, #E9ECF2); --pop-pressed: 2px 2px 0 light-dark(#0E1726, #E9ECF2); /* with translate(2px,2px) */ /* Layout */ --content-max: 75rem; --touch-target: 2.75rem; --row-comfortable: 2.75rem; --row-compact: 2rem; --thumb: 3.5rem; /* Motion */ --duration: 120ms; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root[data-density="compact"] { --row-comfortable: var(--row-compact); } @media (prefers-reduced-motion: reduce) { :root { --duration: 0ms; } } /* App additions: values the app needs that the design file does not define (same conventions as above). */ :root { /* Solid brand fill (Publish button, hero tile): the same red in both themes, so white text stays >= 4.5:1 in dark too. */ --color-brand-fill: #E11D2A; --color-brand-fill-strong: #B3121C; --color-overlay: light-dark(rgb(14 23 38 / 0.4), rgb(0 0 0 / 0.6)); --border-width: 1px; --leading-tight: 1.25; --leading-normal: 1.5; --card-min: 18rem; --bar-height: 1.5rem; --bar-step: 1.75rem; }