/* ========================================================================== Clear Statement — Design Tokens Derived from Clear_Statement_Identity_V7.ai (08//09//26) Two layers: 1. PRIMITIVES (--cs-*) raw values. Never reference these in components. 2. SEMANTIC (--surface, --text-*, --action-*) role names. Use these. Swapping themes means re-pointing layer 2. Layer 1 never changes. V3: the artwork is now authored in RGB throughout — every fill uses an rg operator and no CMYK remains, so the brand primitives below are the designer's actual values read straight from the file. Teal was retired in V3; the palette is four colours. ========================================================================== */ :root { /* ---------- 1. PRIMITIVES: brand ------------------------------------- */ /* The five colours as they appear in the identity document. */ --cs-ink: #080914; /* primary palette, dark */ --cs-slate: #4A5266; /* primary palette, mid */ --cs-blue: #43597C; /* secondary */ --cs-amber: #E2A000; /* secondary — brand accent */ /* Page furniture from the deck. The deck retired the warm mid-grey and moved the grey presentation pages onto slate, so only these two remain outside the palette. Both are warm neutrals — see README. */ --cs-paper: #FAFCF8; /* off-white ground */ --cs-carbon: #1D1D1B; /* page label text */ /* ---------- 1. PRIMITIVES: neutral ramp ------------------------------ */ /* Hue 224, anchored so that 700 === slate and 950 === ink. */ --cs-neutral-0: #FFFFFF; --cs-neutral-50: #F8F9FB; --cs-neutral-100: #F1F2F7; --cs-neutral-200: #E3E6ED; --cs-neutral-300: #D2D6E0; --cs-neutral-400: #9EA5B7; --cs-neutral-500: #6C7692; /* 4.52:1 on white — lightest legible text */ --cs-neutral-600: #5C657D; --cs-neutral-700: #4A5266; /* = slate */ --cs-neutral-800: #2F364C; --cs-neutral-900: #191F31; --cs-neutral-950: #080914; /* = ink */ /* ---------- 1. PRIMITIVES: amber ramp -------------------------------- */ /* 500 is the brand amber. 600/700 exist because brand amber cannot */ /* legally carry text on white (2.27:1). 300 is for dark surfaces. */ --cs-amber-50: #FEF9EE; --cs-amber-100: #FDF0D1; --cs-amber-200: #FDE2A3; --cs-amber-300: #FFC947; /* 12.9:1 on ink — amber for dark mode */ --cs-amber-400: #FFB90F; --cs-amber-500: #E2A000; /* brand amber. Pair with ink, never white. */ --cs-amber-600: #C48B00; /* hover on filled amber */ --cs-amber-700: #AB7900; /* pressed on filled amber */ --cs-amber-800: #916700; /* 5.07:1 on white — amber as TEXT */ /* ---------- 1. PRIMITIVES: status ------------------------------------ */ --cs-success-surface: #EEF9F4; --cs-success-border: #BCE6D3; --cs-success-solid: #31845D; /* 4.58:1 with white text */ --cs-success-fg: #29704F; --cs-danger-surface: #FAEDEE; --cs-danger-border: #EAB8BA; --cs-danger-solid: #A92D33; /* 6.75:1 with white text */ --cs-danger-fg: #792025; --cs-info-surface: #F0F3F7; --cs-info-border: #C2CEE0; --cs-info-solid: #48638E; --cs-info-fg: #334766; /* Warning deliberately reuses the amber family rather than inventing a near-duplicate orange. See README — this is why primary actions are ink, not amber, by default. */ --cs-warning-surface: var(--cs-amber-50); --cs-warning-border: var(--cs-amber-200); --cs-warning-solid: var(--cs-amber-500); --cs-warning-fg: var(--cs-amber-800); /* ---------- 1. PRIMITIVES: type -------------------------------------- */ /* Outfit is the only face in the identity as of this revision, and it is SIL OFL via Google Fonts — the whole system is licence-clear. The mono role is an app-level addition, not from the identity. It exists for data, IDs, timestamps and code, where Outfit's proportional figures misalign in columns. JetBrains Mono is also OFL. */ --cs-font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --cs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --cs-weight-light: 300; --cs-weight-regular: 400; --cs-weight-medium: 500; --cs-weight-semibold: 600; --cs-weight-bold: 700; /* Size / line-height pairs. Outfit runs slightly wide, so tracking is pulled in at display sizes and opened up at caption sizes. */ --cs-text-2xs: 0.6875rem; /* 11px */ --cs-text-xs: 0.75rem; /* 12px */ --cs-text-sm: 0.875rem; /* 14px */ --cs-text-base: 1rem; /* 16px */ --cs-text-lg: 1.125rem; /* 18px */ --cs-text-xl: 1.375rem; /* 22px */ --cs-text-2xl: 1.75rem; /* 28px */ --cs-text-3xl: 2.25rem; /* 36px */ --cs-text-4xl: 3rem; /* 48px */ --cs-leading-tight: 1.15; --cs-leading-snug: 1.3; --cs-leading-normal: 1.5; --cs-leading-relaxed: 1.65; --cs-tracking-tight: -0.02em; /* display sizes */ --cs-tracking-normal: 0; --cs-tracking-wide: 0.06em; /* small caps labels, echoing the letterspaced STATEMENT in the lockup */ /* ---------- 1. PRIMITIVES: space (4px base) -------------------------- */ --cs-space-0: 0; --cs-space-1: 0.25rem; /* 4px */ --cs-space-2: 0.5rem; /* 8px */ --cs-space-3: 0.75rem; /* 12px */ --cs-space-4: 1rem; /* 16px */ --cs-space-5: 1.25rem; /* 20px */ --cs-space-6: 1.5rem; /* 24px */ --cs-space-8: 2rem; /* 32px */ --cs-space-10: 2.5rem; /* 40px */ --cs-space-12: 3rem; /* 48px */ --cs-space-16: 4rem; /* 64px */ --cs-space-20: 5rem; /* 80px */ /* ---------- 1. PRIMITIVES: radius ------------------------------------ */ /* Scaled from the identity's swatch cards, whose corners sit at roughly 14% of the shorter edge — a soft, deliberate curve, not a hairline. */ --cs-radius-sm: 4px; --cs-radius-md: 8px; --cs-radius-lg: 14px; --cs-radius-xl: 20px; --cs-radius-full: 9999px; /* ---------- 1. PRIMITIVES: elevation --------------------------------- */ /* Shadows tinted with the ink hue rather than pure black, so they sit in the same colour world as the rest of the system. */ --cs-shadow-sm: 0 1px 2px rgba(8, 9, 20, 0.06), 0 1px 1px rgba(8, 9, 20, 0.04); --cs-shadow-md: 0 2px 4px rgba(8, 9, 20, 0.06), 0 4px 12px rgba(8, 9, 20, 0.08); --cs-shadow-lg: 0 4px 8px rgba(8, 9, 20, 0.06), 0 12px 32px rgba(8, 9, 20, 0.12); /* ---------- 1. PRIMITIVES: logo clear space -------------------------- */ /* Clear space is one cap-height of CLEAR on every side. Verified against both diagrams: all eight measurements land within 0.97–1.02. Expressed against rendered lockup height, which is what CSS knows: multiply by the height you set on the mark. */ --cs-logo-clearspace-horizontal: 0.45; /* horizontal lockup */ --cs-logo-clearspace-stacked: 0.16; /* stacked lockup */ /* ---------- 1. PRIMITIVES: logo minimum sizes ------------------------ */ /* V7 redrew the small-size monogram roughly 30% heavier (stroke moved from 1/13 to 1/10 of mark height), and at that weight the stated 15px floor holds up in rasterisation tests. Note the page-14 mark is a DIFFERENT, heavier drawing than the hairline monogram used in the lockups on pages 3-13 — that's deliberate, and the two must not be swapped for each other. */ --cs-logo-min-mark: 15px; /* heavy monogram, page 14 */ --cs-logo-min-roundel: 16px; /* solid roundel, page 13 */ --cs-logo-min-lockup: 120px; /* hairline lockup, min WIDTH */ --cs-duration-fast: 120ms; --cs-duration-base: 200ms; --cs-ease: cubic-bezier(0.2, 0, 0.13, 1); /* ====================================================================== 2. SEMANTIC — light theme. These are what components reference. ====================================================================== */ --surface-page: var(--cs-neutral-0); --surface-sunken: var(--cs-neutral-50); --surface-raised: var(--cs-neutral-0); --surface-overlay: var(--cs-neutral-0); --surface-inverse: var(--cs-neutral-950); --surface-brand: var(--cs-amber-500); --text-primary: var(--cs-neutral-950); --text-secondary: var(--cs-neutral-700); --text-tertiary: var(--cs-neutral-500); --text-disabled: var(--cs-neutral-400); --text-inverse: var(--cs-neutral-0); --text-on-brand: var(--cs-neutral-950); /* ink on amber = 8.74:1 */ --text-link: var(--cs-info-solid); --border-subtle: var(--cs-neutral-200); --border-default: var(--cs-neutral-300); --border-strong: var(--cs-neutral-500); --border-focus: var(--cs-amber-500); /* Primary action is ink, not amber. Amber is the brand field colour and doubles as the warning hue; keeping actions ink avoids the collision and clears AA by a wide margin. Amber remains available as the "brand" action variant below for marketing surfaces. */ --action-primary-bg: var(--cs-neutral-950); --action-primary-bg-hover: var(--cs-neutral-800); --action-primary-bg-active: var(--cs-neutral-900); --action-primary-fg: var(--cs-neutral-0); --action-secondary-bg: transparent; --action-secondary-bg-hover: var(--cs-neutral-100); --action-secondary-fg: var(--cs-neutral-900); --action-secondary-border: var(--cs-neutral-300); --action-brand-bg: var(--cs-amber-500); --action-brand-bg-hover: var(--cs-amber-600); --action-brand-bg-active: var(--cs-amber-700); --action-brand-fg: var(--cs-neutral-950); --action-danger-bg: var(--cs-danger-solid); --action-danger-fg: var(--cs-neutral-0); --action-disabled-bg: var(--cs-neutral-200); --action-disabled-fg: var(--cs-neutral-400); --focus-ring: 0 0 0 3px rgba(226, 160, 0, 0.45); } /* ====================================================================== 2. SEMANTIC — dark theme. Surfaces climb the ramp rather than lightening pure black, so elevation reads without shadows. Brand amber steps to 300 because #DD9817 on a dark surface is legible but tiring at text sizes. ====================================================================== */ [data-theme="dark"] { --surface-page: var(--cs-neutral-950); --surface-sunken: #04050B; --surface-raised: var(--cs-neutral-900); --surface-overlay: var(--cs-neutral-800); --surface-inverse: var(--cs-neutral-0); --surface-brand: var(--cs-amber-500); --text-primary: var(--cs-neutral-50); --text-secondary: var(--cs-neutral-300); --text-tertiary: var(--cs-neutral-400); --text-disabled: var(--cs-neutral-600); --text-inverse: var(--cs-neutral-950); --text-on-brand: var(--cs-neutral-950); --text-link: var(--cs-amber-300); --border-subtle: var(--cs-neutral-800); --border-default: var(--cs-neutral-700); --border-strong: var(--cs-neutral-500); --action-primary-bg: var(--cs-amber-500); --action-primary-bg-hover: var(--cs-amber-400); --action-primary-bg-active: var(--cs-amber-600); --action-primary-fg: var(--cs-neutral-950); --action-secondary-bg: transparent; --action-secondary-bg-hover: var(--cs-neutral-800); --action-secondary-fg: var(--cs-neutral-100); --action-secondary-border: var(--cs-neutral-700); --action-disabled-bg: var(--cs-neutral-800); --action-disabled-fg: var(--cs-neutral-600); --cs-success-surface: #12291F; --cs-success-border: #1F4A37; --cs-success-fg: #7FD1AC; --cs-danger-surface: #2B1315; --cs-danger-border: #4E2226; --cs-danger-fg: #F0999E; --cs-info-surface: #141B28; --cs-info-border: #26344B; --cs-info-fg: #A9BEDD; --cs-warning-surface: #241B0C; --cs-warning-border: #453213; --cs-warning-fg: var(--cs-amber-300); } @media (prefers-reduced-motion: reduce) { :root { --cs-duration-fast: 1ms; --cs-duration-base: 1ms; } }