/* Critical Element design tokens — generated from tokens/tokens.json Dark is the default theme (website, decks, one-pagers). Add data-theme="light" on for contracts and documents. */ :root{ /* primitives */ --ce-stone:#F6F5F2; --ce-khaki:#DCDAD2; --ce-field-grey:#878681; --ce-charcoal:#3B3A36; --ce-black:#161513; --ce-oxide:#E26738; --ce-oxide-deep:#B8461F; --ce-blue:#4DA3FF; --ce-blue-deep:#1A6CF2; --ce-n50:#F6F5F2; --ce-n100:#EDECE8; --ce-n200:#DCDAD2; --ce-n300:#C5C3BB; --ce-n400:#A6A49E; --ce-n500:#878681; --ce-n600:#6D6C67; --ce-n700:#54534E; --ce-n800:#3B3A36; --ce-n900:#25241F; --ce-n950:#161513; --ce-healthy:#7DC98A; --ce-warning:#E6B04A; --ce-critical:#FF6B5C; /* type */ --ce-font-display:"Saira","Helvetica Neue",Arial,sans-serif; --ce-font-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif; --ce-font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,Menlo,monospace; --ce-tracking-wordmark:.28em; --ce-tracking-eyebrow:.14em; --ce-tracking-tagline:.30em; --ce-text-xs:11px; --ce-text-sm:13px; --ce-text-md:15px; --ce-text-lg:18px; --ce-text-xl:24px; --ce-text-2xl:32px; --ce-text-3xl:42px; --ce-text-4xl:56px; /* radius + space */ --ce-radius-sm:4px; --ce-radius-md:6px; --ce-radius-lg:10px; --ce-space-1:4px; --ce-space-2:8px; --ce-space-3:12px; --ce-space-4:16px; --ce-space-5:24px; --ce-space-6:32px; --ce-space-7:48px; --ce-space-8:64px; --ce-space-9:96px; /* semantic — dark (default) */ --ce-bg:var(--ce-black); --ce-surface:var(--ce-n900); --ce-surface-2:var(--ce-charcoal); --ce-line:var(--ce-charcoal); --ce-line-strong:var(--ce-n700); --ce-ink:var(--ce-n100); --ce-ink-2:var(--ce-n300); --ce-muted:var(--ce-field-grey); --ce-accent:var(--ce-oxide); --ce-on-accent:var(--ce-black); --ce-secondary:var(--ce-blue); --ce-on-secondary:var(--ce-black); --ce-logo-tile:var(--ce-stone); color-scheme:dark; } :root[data-theme="light"]{ --ce-bg:var(--ce-stone); --ce-surface:#FFFFFF; --ce-surface-2:var(--ce-n100); --ce-line:var(--ce-khaki); --ce-line-strong:var(--ce-n300); --ce-ink:var(--ce-n900); --ce-ink-2:var(--ce-n700); --ce-muted:var(--ce-field-grey); --ce-accent:var(--ce-oxide-deep); --ce-on-accent:#FFFFFF; --ce-secondary:var(--ce-blue-deep); --ce-on-secondary:#FFFFFF; --ce-logo-tile:var(--ce-black); --ce-healthy:#2E7D32; --ce-warning:#B26A00; --ce-critical:#B5271A; color-scheme:light; }