/* * tokens.css — the CitedProof design system, expressed as CSS custom properties. * * WHAT: every colour, type step, space, radius, shadow, duration and pattern the * product is allowed to use. Marketing site and app both consume this file. * * WHY: a var() that does not resolve is a documented past incident on a sibling * product (a button rendered colourless in production because a token was * referenced but never defined). So this file is structured to make that * impossible to repeat: * * LAYER 1 PRIMITIVES --cp-- raw scales. Never used directly * in components. * LAYER 2 SEMANTICS --cp-color- what a component is allowed to * reference. Always defined. * LAYER 3 SYSTEM type / space / radius / shadow / motion / z / layout. * LAYER 4 THEME [data-cp-theme="dark"] remaps LAYER 2 ONLY. * * RULE: components.css may reference LAYER 2, 3 and the pattern tokens only. * If a component needs a new colour, add a semantic alias here first. * Dark mode therefore cannot break a component: it only ever re-points aliases * that are guaranteed to exist in both themes. * * All names are prefixed --cp- because these styles get embedded inside an * agency's own white-laballed page and PDF; an unprefixed --border or --primary * would collide with their stylesheet. */ :root { /* ========================================================================== LAYER 1 — PRIMITIVES ========================================================================== */ /* --- Neutral: cool graphite. The instrument body. ----------------------- Contrast on --cp-neutral-0 (white), measured: 500 6.36:1 · 600 8.6:1 · 700 11.4:1 · 900 16.4:1 */ --cp-neutral-0: #ffffff; --cp-neutral-25: #fbfcfd; --cp-neutral-50: #f5f7fa; --cp-neutral-100: #edf0f4; --cp-neutral-200: #dfe4eb; --cp-neutral-300: #c7ced9; --cp-neutral-400: #9ba5b6; --cp-neutral-500: #6f7a8d; --cp-neutral-600: #55606f; --cp-neutral-700: #3c4552; --cp-neutral-800: #28303b; --cp-neutral-900: #171d26; --cp-neutral-950: #0c1017; /* --- Primary: cobalt ink. One colour, used sparingly, never as a gradient. 600 is the base: 7.66:1 on white, and white sits 7.66:1 on it. */ --cp-cobalt-50: #eff3fe; --cp-cobalt-100: #dde5fc; --cp-cobalt-200: #becdf9; --cp-cobalt-300: #93aaf3; --cp-cobalt-400: #6483e9; --cp-cobalt-500: #3e5fdc; --cp-cobalt-600: #2a45c4; --cp-cobalt-700: #2337a0; --cp-cobalt-800: #1f2f81; --cp-cobalt-900: #1b2a69; --cp-cobalt-950: #121b45; /* --- Proof / positive: a measured green, not a success-confetti green. 600 is 5.33:1 on white. */ --cp-proof-50: #e9f7f0; --cp-proof-100: #cdeddf; --cp-proof-200: #9cdbbf; --cp-proof-300: #5cc59a; --cp-proof-400: #22aa77; --cp-proof-500: #12996a; --cp-proof-600: #0e7a55; --cp-proof-700: #0b6144; --cp-proof-800: #094b35; --cp-proof-900: #073c2b; /* --- Warning: amber. 500 is a fill/icon colour, 700 is the text colour (5.79:1). Never set body text in 500. */ --cp-amber-50: #fef6e7; --cp-amber-100: #fcebc7; --cp-amber-200: #f7d68e; --cp-amber-300: #eeb948; --cp-amber-400: #d59a1a; --cp-amber-500: #b67a06; --cp-amber-600: #9c6803; --cp-amber-700: #8a5b00; --cp-amber-800: #6b4700; --cp-amber-900: #533700; /* --- Negative: brick. Restrained on purpose — this product reports facts, it does not shout. 600 is 6.54:1 on white. */ --cp-brick-50: #fdf0ef; --cp-brick-100: #fadcd9; --cp-brick-200: #f2b4ae; --cp-brick-300: #e78077; --cp-brick-400: #d0392e; --cp-brick-500: #c02e24; --cp-brick-600: #b3261e; --cp-brick-700: #8f1d17; --cp-brick-800: #6e1611; --cp-brick-900: #55110d; /* ========================================================================== LAYER 2 — SEMANTIC ALIASES (the only colours components may reference) ========================================================================== */ /* Surfaces */ --cp-color-bg: var(--cp-neutral-25); --cp-color-bg-subtle: var(--cp-neutral-50); --cp-color-surface: var(--cp-neutral-0); --cp-color-surface-raised: var(--cp-neutral-0); --cp-color-surface-sunken: var(--cp-neutral-50); --cp-color-surface-inverse: var(--cp-neutral-900); --cp-color-overlay: rgb(12 16 23 / 0.48); /* Lines */ --cp-color-border: var(--cp-neutral-200); --cp-color-border-subtle: var(--cp-neutral-100); --cp-color-border-strong: var(--cp-neutral-300); --cp-color-border-inverse: rgb(255 255 255 / 0.16); /* Text */ --cp-color-text: var(--cp-neutral-900); --cp-color-text-muted: var(--cp-neutral-600); --cp-color-text-subtle: var(--cp-neutral-500); --cp-color-text-inverse: var(--cp-neutral-0); --cp-color-text-on-primary: var(--cp-neutral-0); /* Primary action */ --cp-color-primary: var(--cp-cobalt-600); --cp-color-primary-hover: var(--cp-cobalt-700); --cp-color-primary-active: var(--cp-cobalt-800); --cp-color-primary-text: var(--cp-cobalt-700); --cp-color-primary-bg: var(--cp-cobalt-50); --cp-color-primary-border: var(--cp-cobalt-200); --cp-color-link: var(--cp-cobalt-700); --cp-color-link-hover: var(--cp-cobalt-800); --cp-color-focus-ring: rgb(42 69 196 / 0.34); /* Proof / positive */ --cp-color-proof: var(--cp-proof-600); --cp-color-proof-hover: var(--cp-proof-700); --cp-color-proof-text: var(--cp-proof-700); --cp-color-proof-bg: var(--cp-proof-50); --cp-color-proof-border: var(--cp-proof-200); --cp-color-proof-on: var(--cp-neutral-0); /* Warning */ --cp-color-warn: var(--cp-amber-500); --cp-color-warn-hover: var(--cp-amber-600); --cp-color-warn-text: var(--cp-amber-700); --cp-color-warn-bg: var(--cp-amber-50); --cp-color-warn-border: var(--cp-amber-200); --cp-color-warn-on: var(--cp-neutral-0); /* Negative */ --cp-color-negative: var(--cp-brick-600); --cp-color-negative-hover: var(--cp-brick-700); --cp-color-negative-text: var(--cp-brick-700); --cp-color-negative-bg: var(--cp-brick-50); --cp-color-negative-border: var(--cp-brick-200); --cp-color-negative-on: var(--cp-neutral-0); /* NOT ENOUGH DATA / unknown / unmeasured. Deliberately neutral: absence of evidence is not a bad result, and it is never rendered as zero. See --cp-pattern-nodata below. */ --cp-color-nodata: var(--cp-neutral-500); --cp-color-nodata-text: var(--cp-neutral-600); --cp-color-nodata-bg: var(--cp-neutral-50); --cp-color-nodata-border: var(--cp-neutral-300); --cp-color-nodata-on: var(--cp-neutral-0); --cp-color-nodata-hatch: var(--cp-neutral-300); /* Softer line for hatched surfaces that carry text on top of them: at full strength the hatch competes with 12px uppercase mono and costs legibility. */ --cp-color-nodata-hatch-soft: var(--cp-neutral-200); --cp-color-nodata-ground: var(--cp-neutral-50); /* ========================================================================== LAYER 3 — SYSTEM ========================================================================== */ /* --- Typeface stacks --------------------------------------------------- Instrument Sans UI + headings. A grotesque with slightly narrow forms and a high x-height: dense tables stay readable. IBM Plex Mono every number, code, engine name, bot name, grade and timestamp. If it is data, it is monospaced — that is the instrument tell, and it makes columns align by default. Instrument Serif evidence quotations only (a cited passage, an answer an engine actually gave). Never a heading, never a button. */ --cp-font-sans: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; --cp-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'DejaVu Sans Mono', Menlo, monospace; --cp-font-quote: 'Instrument Serif', Georgia, 'Times New Roman', serif; /* --- Type scale. Mobile-first; body never below 16px on any viewport. --- */ --cp-text-2xs: 0.6875rem; /* 11px — uppercase mono micro-labels only */ --cp-text-xs: 0.78125rem;/* 12.5px — table meta, footnotes */ --cp-text-sm: 0.875rem; /* 14px — secondary UI */ --cp-text-base: 1rem; /* 16px — body. The floor. */ --cp-text-lg: 1.125rem; /* 18px — lead paragraph */ --cp-text-xl: 1.25rem; /* 20px — card title */ --cp-text-2xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.625rem); --cp-text-3xl: clamp(1.625rem, 1.35rem + 1.4vw, 2.0625rem); --cp-text-4xl: clamp(2rem, 1.6rem + 2.0vw, 2.75rem); --cp-text-5xl: clamp(2.375rem, 1.8rem + 3.0vw, 3.75rem); --cp-text-display: clamp(2.75rem, 2rem + 4.4vw, 4.75rem); /* Score readout — the one place a very large numeral is allowed. */ --cp-text-score: clamp(3rem, 2.2rem + 4.6vw, 4.5rem); --cp-text-score-sm: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); --cp-leading-none: 1; --cp-leading-tight: 1.16; --cp-leading-snug: 1.32; --cp-leading-normal: 1.55; --cp-leading-relaxed: 1.7; --cp-tracking-tighter: -0.022em; --cp-tracking-tight: -0.013em; --cp-tracking-normal: 0em; --cp-tracking-wide: 0.04em; --cp-tracking-caps: 0.09em; /* uppercase mono labels */ --cp-weight-regular: 400; --cp-weight-medium: 500; --cp-weight-semibold: 600; --cp-weight-bold: 700; --cp-measure: 68ch; /* 65–75 char line length */ --cp-measure-narrow: 52ch; /* --- Space. 4px base. ------------------------------------------------- */ --cp-space-0: 0; --cp-space-px: 1px; --cp-space-1: 0.25rem; /* 4 */ --cp-space-2: 0.5rem; /* 8 */ --cp-space-3: 0.75rem; /* 12 */ --cp-space-4: 1rem; /* 16 */ --cp-space-5: 1.25rem; /* 20 */ --cp-space-6: 1.5rem; /* 24 */ --cp-space-7: 1.75rem; /* 28 */ --cp-space-8: 2rem; /* 32 */ --cp-space-10: 2.5rem; /* 40 */ --cp-space-12: 3rem; /* 48 */ --cp-space-14: 3.5rem; /* 56 */ --cp-space-16: 4rem; /* 64 */ --cp-space-20: 5rem; /* 80 */ --cp-space-24: 6rem; /* 96 */ --cp-space-32: 8rem; /* 128 */ --cp-section-y: clamp(3rem, 2rem + 5vw, 6rem); /* --- Radii. Small: an instrument has machined corners, not pill blobs. -- */ --cp-radius-xs: 3px; --cp-radius-sm: 5px; --cp-radius-md: 8px; --cp-radius-lg: 12px; --cp-radius-xl: 16px; --cp-radius-2xl: 22px; --cp-radius-full: 999px; /* --- Elevation. Borders do most of the work; shadows are a whisper. ----- */ --cp-shadow-none: none; --cp-shadow-xs: 0 1px 1px rgb(12 16 23 / 0.04); --cp-shadow-sm: 0 1px 2px rgb(12 16 23 / 0.06), 0 1px 1px rgb(12 16 23 / 0.04); --cp-shadow-md: 0 2px 4px -1px rgb(12 16 23 / 0.07), 0 4px 12px -2px rgb(12 16 23 / 0.06); --cp-shadow-lg: 0 8px 24px -6px rgb(12 16 23 / 0.12), 0 2px 6px -2px rgb(12 16 23 / 0.06); --cp-shadow-focus: 0 0 0 3px var(--cp-color-focus-ring); --cp-hairline: 1px; /* --- Motion. Short, linear-feeling, never bouncy. ---------------------- */ --cp-ease-out: cubic-bezier(0.2, 0.8, 0.3, 1); --cp-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --cp-ease-exit: cubic-bezier(0.4, 0, 1, 1); --cp-duration-instant: 90ms; --cp-duration-fast: 140ms; --cp-duration-base: 200ms; --cp-duration-slow: 320ms; --cp-transition-colors: color var(--cp-duration-fast) var(--cp-ease-out), background-color var(--cp-duration-fast) var(--cp-ease-out), border-color var(--cp-duration-fast) var(--cp-ease-out), box-shadow var(--cp-duration-fast) var(--cp-ease-out); --cp-transition-transform: transform var(--cp-duration-base) var(--cp-ease-out); /* --- Layout ------------------------------------------------------------ */ --cp-container: 1200px; --cp-container-narrow: 760px; --cp-container-wide: 1440px; --cp-gutter: clamp(1rem, 0.65rem + 1.6vw, 2rem); --cp-tap-min: 44px; /* every interactive target, no exceptions */ --cp-control-height-sm: 36px; --cp-control-height: 44px; --cp-control-height-lg: 52px; /* --- Z-index scale ----------------------------------------------------- */ --cp-z-base: 0; --cp-z-raised: 10; --cp-z-sticky: 20; --cp-z-dropdown: 30; --cp-z-overlay: 40; --cp-z-modal: 50; --cp-z-toast: 60; /* --- Patterns ---------------------------------------------------------- THE HATCH. The signature of this brand. Missing / insufficient data is ALWAYS drawn as a diagonal hatch and never as a bar of length zero, an empty ring, or the number 0. A hatch reads as "no reading taken"; a zero reads as "we measured, you scored nothing" — and that lie is exactly what this company was built to refuse. */ --cp-pattern-nodata: repeating-linear-gradient( 135deg, var(--cp-color-nodata-ground) 0 5px, var(--cp-color-nodata-hatch) 5px 6px ); /* Same hatch, quieter line — for pills, badges and callouts whose own text sits on top of it. */ --cp-pattern-nodata-soft: repeating-linear-gradient( 135deg, var(--cp-color-nodata-ground) 0 5px, var(--cp-color-nodata-hatch-soft) 5px 6px ); --cp-pattern-nodata-dense: repeating-linear-gradient( 135deg, var(--cp-color-nodata-ground) 0 3px, var(--cp-color-nodata-hatch) 3px 4px ); /* Faint measurement grid — page/hero ground only, never behind body text. */ --cp-pattern-grid: linear-gradient(var(--cp-color-border-subtle) var(--cp-hairline), transparent var(--cp-hairline)), linear-gradient(90deg, var(--cp-color-border-subtle) var(--cp-hairline), transparent var(--cp-hairline)); --cp-pattern-grid-size: 32px 32px; } /* ============================================================================ LAYER 4 — DARK THEME Remaps LAYER 2 only. Opt in with , or let the OS decide. Every alias defined above is redefined here — none may be missing. ============================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-cp-theme='light']) { --cp-color-bg: var(--cp-neutral-950); --cp-color-bg-subtle: #0f141c; --cp-color-surface: #131922; --cp-color-surface-raised: #19212c; --cp-color-surface-sunken: #0f141c; --cp-color-surface-inverse: var(--cp-neutral-50); --cp-color-overlay: rgb(3 5 9 / 0.66); --cp-color-border: #2a3340; --cp-color-border-subtle: #1e2632; --cp-color-border-strong: #3a4554; --cp-color-border-inverse: rgb(12 16 23 / 0.14); --cp-color-text: #e8ecf2; --cp-color-text-muted: #a3adbd; --cp-color-text-subtle: #8792a3; --cp-color-text-inverse: var(--cp-neutral-950); --cp-color-text-on-primary: var(--cp-neutral-0); --cp-color-primary: var(--cp-cobalt-500); --cp-color-primary-hover: var(--cp-cobalt-400); --cp-color-primary-active: var(--cp-cobalt-300); --cp-color-primary-text: var(--cp-cobalt-300); --cp-color-primary-bg: rgb(42 69 196 / 0.18); --cp-color-primary-border: rgb(100 131 233 / 0.42); --cp-color-link: var(--cp-cobalt-300); --cp-color-link-hover: var(--cp-cobalt-200); --cp-color-focus-ring: rgb(100 131 233 / 0.48); --cp-color-proof: var(--cp-proof-500); --cp-color-proof-hover: var(--cp-proof-400); --cp-color-proof-text: var(--cp-proof-300); --cp-color-proof-bg: rgb(18 153 106 / 0.16); --cp-color-proof-border: rgb(92 197 154 / 0.38); --cp-color-proof-on: var(--cp-neutral-950); --cp-color-warn: var(--cp-amber-400); --cp-color-warn-hover: var(--cp-amber-300); --cp-color-warn-text: var(--cp-amber-200); --cp-color-warn-bg: rgb(213 154 26 / 0.15); --cp-color-warn-border: rgb(238 185 72 / 0.36); --cp-color-warn-on: var(--cp-neutral-950); --cp-color-negative: var(--cp-brick-400); --cp-color-negative-hover: var(--cp-brick-300); --cp-color-negative-text: var(--cp-brick-200); --cp-color-negative-bg: rgb(208 57 46 / 0.16); --cp-color-negative-border: rgb(231 128 119 / 0.36); --cp-color-negative-on: var(--cp-neutral-0); --cp-color-nodata: var(--cp-neutral-400); --cp-color-nodata-text: #a3adbd; --cp-color-nodata-bg: #171e28; --cp-color-nodata-border: #3a4554; --cp-color-nodata-on: var(--cp-neutral-950); --cp-color-nodata-hatch: #3a4554; --cp-color-nodata-hatch-soft: #2a3340; --cp-color-nodata-ground: #171e28; --cp-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.28); --cp-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.34), 0 1px 1px rgb(0 0 0 / 0.24); --cp-shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.4), 0 4px 12px -2px rgb(0 0 0 / 0.32); --cp-shadow-lg: 0 8px 24px -6px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.34); } } /* Explicit opt-in, identical values. Duplicated rather than @import-ed so the file has no load-order dependency. */ :root[data-cp-theme='dark'] { --cp-color-bg: var(--cp-neutral-950); --cp-color-bg-subtle: #0f141c; --cp-color-surface: #131922; --cp-color-surface-raised: #19212c; --cp-color-surface-sunken: #0f141c; --cp-color-surface-inverse: var(--cp-neutral-50); --cp-color-overlay: rgb(3 5 9 / 0.66); --cp-color-border: #2a3340; --cp-color-border-subtle: #1e2632; --cp-color-border-strong: #3a4554; --cp-color-border-inverse: rgb(12 16 23 / 0.14); --cp-color-text: #e8ecf2; --cp-color-text-muted: #a3adbd; --cp-color-text-subtle: #8792a3; --cp-color-text-inverse: var(--cp-neutral-950); --cp-color-text-on-primary: var(--cp-neutral-0); --cp-color-primary: var(--cp-cobalt-500); --cp-color-primary-hover: var(--cp-cobalt-400); --cp-color-primary-active: var(--cp-cobalt-300); --cp-color-primary-text: var(--cp-cobalt-300); --cp-color-primary-bg: rgb(42 69 196 / 0.18); --cp-color-primary-border: rgb(100 131 233 / 0.42); --cp-color-link: var(--cp-cobalt-300); --cp-color-link-hover: var(--cp-cobalt-200); --cp-color-focus-ring: rgb(100 131 233 / 0.48); --cp-color-proof: var(--cp-proof-500); --cp-color-proof-hover: var(--cp-proof-400); --cp-color-proof-text: var(--cp-proof-300); --cp-color-proof-bg: rgb(18 153 106 / 0.16); --cp-color-proof-border: rgb(92 197 154 / 0.38); --cp-color-proof-on: var(--cp-neutral-950); --cp-color-warn: var(--cp-amber-400); --cp-color-warn-hover: var(--cp-amber-300); --cp-color-warn-text: var(--cp-amber-200); --cp-color-warn-bg: rgb(213 154 26 / 0.15); --cp-color-warn-border: rgb(238 185 72 / 0.36); --cp-color-warn-on: var(--cp-neutral-950); --cp-color-negative: var(--cp-brick-400); --cp-color-negative-hover: var(--cp-brick-300); --cp-color-negative-text: var(--cp-brick-200); --cp-color-negative-bg: rgb(208 57 46 / 0.16); --cp-color-negative-border: rgb(231 128 119 / 0.36); --cp-color-negative-on: var(--cp-neutral-0); --cp-color-nodata: var(--cp-neutral-400); --cp-color-nodata-text: #a3adbd; --cp-color-nodata-bg: #171e28; --cp-color-nodata-border: #3a4554; --cp-color-nodata-on: var(--cp-neutral-950); --cp-color-nodata-hatch: #3a4554; --cp-color-nodata-hatch-soft: #2a3340; --cp-color-nodata-ground: #171e28; --cp-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.28); --cp-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.34), 0 1px 1px rgb(0 0 0 / 0.24); --cp-shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.4), 0 4px 12px -2px rgb(0 0 0 / 0.32); --cp-shadow-lg: 0 8px 24px -6px rgb(0 0 0 / 0.5), 0 2px 6px -2px rgb(0 0 0 / 0.34); } /* Motion is decoration. If the OS says no, it is off — everywhere, once. */ @media (prefers-reduced-motion: reduce) { :root { --cp-duration-instant: 1ms; --cp-duration-fast: 1ms; --cp-duration-base: 1ms; --cp-duration-slow: 1ms; } }