/* ========================================================================== Search & Cite — DESIGN TOKENS Values only. No selectors beyond :root, no components, no layout. Everything downstream reads from here, so a re-skin is this file plus components/*.css — never a hunt through 2,000 lines. THE CONTRACT ------------ Nothing downstream may declare a raw colour. Same rule, same vocabulary and same rigour as promptbuilder/assets/css/tokens.css — a user moving between PromptBuilder and Search & Cite should feel one product. Every accent and status hue is split four ways, because one hex cannot do four jobs: -fg the text/icon tone — read ON a surface or on its own tint -bg a 14% tint of -fg — the chip / callout fill -border a 32% tint of -fg — the chip's edge -solid an opaque fill — with a NAMED on-colour that sits on it The previous file conflated all four into `--primary-color: #4F46E5`, which is why the same hex was simultaneously a button fill and label text at 2.49:1. There is no single value that can be both. CONTRAST -------- Every ratio in this file is MEASURED, not asserted: WCAG 2.2 relative luminance over the alpha-composited surface the text actually paints on (Porter-Duff source-over, the same maths _dev/audit.mjs runs against the live DOM). Thresholds: 1.4.3 normal text 4.5:1 · large (>=24px, or >=18.66px at >=700) 3:1 1.4.11 non-text UI component boundaries 3:1 `check.sh` is the arbiter, not this comment: it re-derives every one of these numbers from the rendered page across 11 states x 4 viewports. SURFACES ARE OPAQUE, DELIBERATELY --------------------------------- The old stack was five stacked `rgba(255,255,255,0.0x)` washes over a translucent glass shell. Three problems: the composited value depended on how deeply a component happened to be nested, two 5% washes are not 10%, and the ambient aurora behind the page shifted the real painted colour away from anything CSS could predict. Opaque levels make the measured number and the painted number the same number. The aurora still reads — around the shell, where nothing has to be legible on top of it. ========================================================================== */ :root { /* ---- Surface levels ---------------------------------------------- A six-step indigo-black stack. Level rises with elevation, and the reading board climbs it: page -> shell -> card -> evidence -> badge. */ --surface-0: #0B0A17; /* page void, behind the app shell */ --surface-1: #12111F; /* the app shell: sidebar, content column */ --surface-2: #191828; /* panels and claim cards */ --surface-3: #221F33; /* evidence rows, raised / hover of surface-2 */ --surface-4: #2C2941; /* badges, pressed / selected */ --surface-input: #0E0D19; /* form wells — recessed, not raised */ --surface-scrim: rgba(6, 5, 14, 0.76); /* modal + limit-modal backdrop */ /* Zero-alpha end-stop for --surface-2. A fade must end at its own colour at alpha 0; `transparent` is rgba(0,0,0,0) and goes muddy at the midpoint of the interpolation. */ --surface-2-fade: rgba(25, 24, 40, 0); /* ---- Border levels ----------------------------------------------- subtle/default/strong are decorative separators (1.4.11 exempt). `interactive` is load-bearing — it is the boundary of a form field — and is verified: #6B6889 vs surface-1 3.52 · surface-2 3.30 · surface-3 3.02 · surface-input 3.64, all AA for a UI component. */ --border-subtle: #201E30; --border-default: #2B2940; --border-strong: #3A3754; --border-interactive: #6B6889; /* ---- Text levels -------------------------------------------------- Measured against surface-1 / 2 / 3 / 4 / input: strong #FFFFFF 18.66 / 17.46 / 16.01 / 13.99 / 19.26 AA primary #E9ECF7 15.82 / 14.81 / 13.57 / 11.87 / 16.33 AA secondary #AEB4CC 9.06 / 8.48 / 7.78 / 6.80 / 9.36 AA tertiary #9AA1BC 7.28 / 6.82 / 6.25 / 5.46 / 7.52 AA muted #8E95B2 6.30 / 5.90 / 5.41 / 4.73 / 6.50 AA There is no sixth, dimmer level. The old --text-muted was #6B7280, which measured 3.61 on the card surface — that is what made the claim's context line "near-invisible" in the critique. #8E95B2 is the floor: it clears 4.5:1 on every surface in this file, including surface-4, with no disabled-control exemption claimed anywhere. */ --text-strong: #FFFFFF; --text-primary: #E9ECF7; --text-secondary: #AEB4CC; --text-tertiary: #9AA1BC; --text-muted: #8E95B2; /* On a status -solid fill. Never white: #FFFFFF on --verdict-supported-solid is 1.88:1. Dark ink on the same fill is 10.46:1. */ --text-on-solid: #0B0A17; --text-on-accent: #FFFFFF; /* on --accent-solid: 5.48 AA */ /* ---- Accent ------------------------------------------------------- -fg #ADB6FF 9.69 / 9.07 / 8.32 / 7.27 on surface-1/2/3/4 on its own 14% tint: 7.45 / 6.84 / 6.19 / 5.40 AA -solid #5D57D9 --text-on-accent on it 5.48 AA as a UI component: 3.40 vs surface-1, 3.19 vs surface-2 -hover #6E63E8 --text-on-accent on it 4.55 AA (still AA when hot) */ --accent-fg: #ADB6FF; --accent-solid: #5D57D9; --accent-hover: #6E63E8; --accent-bg: rgba(173, 182, 255, 0.14); --accent-border: rgba(173, 182, 255, 0.32); --accent-fade: rgba(173, 182, 255, 0); /* ---- Status ------------------------------------------------------- Same four-way split. Every -fg is measured plain on surface-1/2/3 and on its own 14% tint over those surfaces; every -solid names the ink that sits on it. */ /* 9.95 / 9.31 / 8.53 plain · 7.73 / 7.11 / 6.46 on own tint AA */ --success-fg: #3DD68C; --success-bg: rgba(61, 214, 140, 0.14); --success-border: rgba(61, 214, 140, 0.32); --success-solid: #3DD68C; /* --text-on-solid on it 10.46 AA */ /* 10.50 / 9.82 / 9.01 plain · 8.05 / 7.39 / 6.69 on own tint AA */ --warning-fg: #F5B841; --warning-bg: rgba(245, 184, 65, 0.14); --warning-border: rgba(245, 184, 65, 0.32); --warning-solid: #F5B841; /* --text-on-solid on it 11.04 AA */ /* 7.39 / 6.92 / 6.34 plain · 6.02 / 5.55 / 5.05 on own tint AA #EF4444 (the old --error-color) measured 4.03 on its own tint and was the reason every "Unsupported" chip failed. */ --error-fg: #FF7A7A; --error-bg: rgba(255, 122, 122, 0.14); --error-border: rgba(255, 122, 122, 0.32); --error-solid: #FF7A7A; /* --text-on-solid on it 7.77 AA (#FFFFFF on it is 2.52 and would FAIL) */ --error-fade: rgba(255, 122, 122, 0); /* 9.45 / 8.85 / 8.11 plain · 7.36 / 6.76 / 6.14 on own tint AA */ --info-fg: #4CC7E8; --info-bg: rgba(76, 199, 232, 0.14); --info-border: rgba(76, 199, 232, 0.32); --info-solid: #4CC7E8; /* --text-on-solid on it 9.95 AA */ /* 8.75 / 8.19 / 7.51 plain · 6.85 / 6.29 / 5.71 on own tint AA */ --neutral-fg: #A8B2C6; --neutral-bg: rgba(168, 178, 198, 0.14); --neutral-border: rgba(168, 178, 198, 0.32); --neutral-solid: #A8B2C6; /* --text-on-solid on it 9.20 AA */ /* ---- Verdict + stance semantics ----------------------------------- The renderers never reach for a status colour either — they use these, so "what colour is disputed" has exactly one answer, and re-hueing a verdict is one line here rather than a grep through six components. Each verdict also owns a RAIL colour: the 4px rule down the left of a claim card. That is a non-text UI component under 1.4.11, so it is the -solid (not the -border tint), which clears 3:1 against surface-2 by a wide margin (7.46 – 9.82). */ --verdict-supported-fg: var(--success-fg); --verdict-supported-bg: var(--success-bg); --verdict-supported-border: var(--success-border); --verdict-supported-solid: var(--success-solid); --verdict-disputed-fg: var(--warning-fg); --verdict-disputed-bg: var(--warning-bg); --verdict-disputed-border: var(--warning-border); --verdict-disputed-solid: var(--warning-solid); --verdict-unsupported-fg: var(--error-fg); --verdict-unsupported-bg: var(--error-bg); --verdict-unsupported-border: var(--error-border); --verdict-unsupported-solid: var(--error-solid); --verdict-insufficient-fg: var(--neutral-fg); --verdict-insufficient-bg: var(--neutral-bg); --verdict-insufficient-border: var(--neutral-border); --verdict-insufficient-solid: var(--neutral-solid); /* Pending is not a verdict — it is the absence of one. It reads as the accent (something is happening) rather than as a grey result. */ --verdict-pending-fg: var(--accent-fg); --verdict-pending-bg: var(--accent-bg); --verdict-pending-border: var(--accent-border); /* ---- Elevation ---------------------------------------------------- Neutral black, never tinted, so shadows never compete with a verdict. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.36), 0 4px 12px rgba(0, 0, 0, 0.28); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.38), 0 12px 28px rgba(0, 0, 0, 0.34); --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.42), 0 28px 64px rgba(0, 0, 0, 0.46); /* ---- Radii --------------------------------------------------------- */ --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.25rem; --radius-pill: 9999px; /* ---- Type ---------------------------------------------------------- PromptBuilder is an instrument at 13px. This is a READING surface — claim text and evidence quotes are the product — so the scale keeps that file's structure and re-picks every value upward, and adds the intermediate steps the old three-value scale was missing (there used to be nothing at all between 1.125rem and 1.5rem, which is why a claim was typeset at the same size as a footnote). */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Cascadia Code', monospace; --text-3xs: 0.6875rem; /* 11px — eyebrow caps, badge text */ --text-2xs: 0.75rem; /* 12px — meta lines */ --text-xs: 0.8125rem; /* 13px — dense secondary */ --text-sm: 0.875rem; /* 14px — controls, chips */ --text-md: 0.9375rem; /* 15px — evidence quotes, secondary prose */ --text-base: 1rem; /* 16px — body */ --text-lg: 1.0625rem; /* 17px — CLAIM TEXT */ --text-xl: 1.25rem; /* 20px — section headings */ --text-2xl: 1.5rem; /* 24px — panel titles */ --text-3xl: 1.875rem; /* 30px — hero on small screens */ --text-4xl: 2.375rem; /* 38px — hero */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed: 1.65; --ls-tight: -0.011em; --ls-wide: 0.04em; --ls-caps: 0.09em; /* the one eyebrow/label treatment */ /* Line length for sustained reading. 66ch on the evidence column keeps a quote inside the 60–75 character band where prose is easiest to track; claims run slightly wider because they are one or two sentences. */ --measure-read: 66ch; --measure-claim: 78ch; /* ---- Spacing (4px base) -------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* ---- Motion -------------------------------------------------------- Durations are tokens so prefers-reduced-motion can zero them in ONE place (base.css) instead of every transition having its own override. */ --transition-speed: 0.16s; --duration-fast: 0.09s; --duration-base: 0.16s; --duration-slow: 0.26s; --duration-ambient: 20s; --ease-out: cubic-bezier(0.16, 1, 0.30, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Set to `none` under reduced motion. Any decorative keyframe animation should use this rather than naming its own duration. */ --motion-ambient: aurora-1 var(--duration-ambient) infinite alternate; /* ---- Focus --------------------------------------------------------- Two-tone: a --surface-0 gap, then the accent. The gap is what makes the ring legible on top of --accent-solid, where the accent alone reaches only 2.85:1. Accent vs every surface in this file: 7.27 – 10.20. --focus-ring-quiet is the resting-focus treatment (see base.css): a pointer user who has just clicked a control still gets a real, visible indication of where focus went, one step quieter than the keyboard ring. It is a genuine 3:1+ boundary, not a transparent placeholder. */ --focus-ring-color: var(--accent-fg); --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--focus-ring-color); --focus-ring-quiet: 0 0 0 2px var(--surface-0), 0 0 0 3px var(--border-interactive); /* ---- Layout -------------------------------------------------------- --nav-h is the site nav's sticky height; sticky elements inside the app offset by it so nothing parks underneath the chrome. */ --app-max-width: 1440px; --sidebar-width: 300px; /* Height of the sticky board summary. Declared as a token because THREE things have to agree on it: the bar's own layout, `scroll-padding-top` on the document, and `scroll-margin-top` on every claim card. Get it wrong and "Next problem claim" scrolls the user to a claim and parks it underneath the bar — the board's primary navigation affordance quietly landing on the one place you cannot read. Re-measured per breakpoint in components/claims.css. */ --board-h: 60px; --nav-h: 65px; /* .nav-content 4rem + its 1px border, css/nav-shared.css */ --hit-min: 44px; /* WCAG 2.2 AA 2.5.5/2.5.8 target size */ --z-sticky: 20; --z-modal: 20000; --z-toast: 20100; /* ---- Legacy aliases ------------------------------------------------- The shared site chrome (nav_functions.php / footer_functions.php render their CSS inline) reads --primary-color, --bg-primary, --glass-* and friends from whatever palette the host page supplies. Those names are NOT part of this design system — they are the chrome's interface — so they resolve here to the nearest correct token and are never used by app code. --primary-color in particular is a FILL for the chrome's gradient buttons; it must never be read as a text colour again. */ --primary-color: var(--accent-solid); --primary-strong: #4A44C8; --secondary-color: var(--accent-fg); --accent-primary: var(--accent-fg); --bg-primary: var(--surface-0); --bg-secondary: var(--surface-2); --bg-tertiary: var(--surface-3); --glass-background: var(--surface-2); --glass-background-hover: var(--surface-3); --glass-border: var(--border-default); --border-color: var(--border-default); --border-hover: var(--border-strong); --text-headings: var(--text-strong); --success-color: var(--success-fg); --warning-color: var(--warning-fg); --error-color: var(--error-fg); --info-color: var(--info-fg); }