/* ============================================================ COFFER PARTNERS — DESIGN TOKENS (canonical, machine-readable) Source of truth: tokens.json (W3C DTCG). This file mirrors it for the web. 3 layers: 1) primitives (raw values) → 2) semantic (intent) → 3) component. Rule for humans and AI agents: NEVER hard-code a hex/px/shadow in markup. Reference a semantic token; if none fits, add one here first. See DESIGN_SYSTEM.md. ============================================================ */ :root { /* ---------- 1. PRIMITIVES (raw values — do not reference directly in UI) ---------- */ /* Ink — the dark foundation, darkest → lightest */ --ink-900:#090C14; --ink-850:#0B0F1A; --ink-800:#0D1322; --ink-700:#0E1320; --ink-600:#121829; --ink-560:#141B2B; --ink-500:#1A2236; --ink-450:#1F2942; --ink-400:#2A3450; --ink-350:#33405C; /* Warm dark — only for the featured/primary card tint */ --warm-900:#15140E; --warm-800:#1A1A14; --warm-edge:#3A3115; --warm-text:#A59E86; /* Gold — the single accent */ --gold-300:#E0C079; --gold-500:#C9A85C; --gold-700:#9C7E37; --gold-900:#6F5A22; /* AA-safe deep gold for light surfaces */ /* Cream — text on dark */ --cream-hi:#F3F0E8; --cream:#EDEAE2; /* Slate — muted text/labels on dark, strong → faint */ --slate-100:#C5CAD8; --slate-300:#9AA0B0; --slate-350:#8088A0; --slate-400:#7E869C; --slate-420:#7C8290; --slate-450:#6B7287; --slate-500:#5A6072; --slate-600:#4A5168; --slate-700:#3D445C; /* Paper — light surfaces + ink on light */ --paper-0:#FFFFFF; --paper-50:#FFFEFB; --paper-300:#F5F2EA; --paper-400:#EDEBE4; --paper-ink:#13171F; --paper-ink-2:#3C4250; --paper-ink-3:#4F5564; --paper-ink-faint:#9C9A90; --line-100:#DAD5C8; --line-200:#D4D1C8; --line-300:#EFEDE6; --line-400:#EAE7DF; --line-500:#D8D4CA; /* Status */ --green-500:#3E946B; /* Accent alphas (glows, tints, selection) */ --gold-a03:rgba(201,168,92,0.03); --gold-a08:rgba(201,168,92,0.08); --gold-a10:rgba(201,168,92,0.10); --gold-a12:rgba(201,168,92,0.12); --gold-a14:rgba(201,168,92,0.14); --gold-a30:rgba(201,168,92,0.30); --gold-a45:rgba(201,168,92,0.45); /* ---------- 2. SEMANTIC (intent — reference THESE in UI) ---------- */ /* Surfaces */ --color-surface-page:var(--ink-700); /* default dark page background */ --color-surface-raised:var(--ink-600); /* cards on dark */ --color-surface-sunken:var(--ink-850); /* panels, inset wells */ --color-surface-header:rgba(14,19,32,0.82); /* sticky translucent header */ --color-surface-paper:var(--paper-300); /* light "paper" sections */ --color-surface-paper-card:var(--paper-50); /* cards on paper */ --color-surface-featured:var(--warm-900); /* the one primary/featured card */ /* Text — on dark */ --color-text-heading:var(--cream-hi); --color-text-primary:var(--cream); --color-text-primary-dim:var(--line-500); /* dimmed light text, e.g. footer wordmark */ --color-text-muted:var(--slate-300); /* secondary body/labels on dark */ --color-text-subtle:var(--slate-350); /* tertiary labels/body on dark */ --color-text-support:var(--slate-400); /* small supporting copy on dark */ --color-text-soft:var(--slate-350); /* de-emphasized inline microcopy (raised to AA) */ --color-text-faint:var(--slate-350); /* faint labels on dark (AA floor) */ --color-text-disclaimer:var(--slate-400); /* disclaimers / fine print on dark (AA) */ --color-text-faintest:var(--slate-400); /* faintest legal/footer text (AA) */ --color-text-figure:var(--slate-100); /* mono ledger figures */ --color-text-on-accent:var(--ink-700); /* dark text on a gold button */ --color-text-on-featured:var(--warm-text); /* body text on the warm featured card */ /* Text — on paper/light */ --color-text-on-paper:var(--paper-ink); --color-text-on-paper-body:var(--paper-ink-2); /* body paragraphs on light */ --color-text-on-paper-muted:var(--paper-ink-3); --color-text-on-paper-faint:var(--paper-ink-faint); /* Accent / action */ --color-action-primary:var(--gold-500); --color-action-primary-hover:var(--gold-300); --color-accent:var(--gold-500); /* eyebrows, marks, rules */ --color-accent-on-paper:var(--gold-900); /* AA-contrast gold on light: eyebrows, ordinals */ --color-accent-emphasis:var(--gold-300); /* highlighted recovered-value figure */ /* Borders */ --color-border-subtle:var(--ink-500); --color-border-strong:var(--ink-450); --color-border-paper:var(--line-100); --color-border-focus:var(--gold-500); /* Status (reserve for true status only — never decorative) */ --color-status-success:var(--green-500); /* Effects */ --glow-accent:var(--gold-a10); --selection-bg:var(--gold-a30); --color-text-selection:var(--paper-0); /* ---------- SPACING (base 4px) ---------- */ --space-0:0; --space-100:4px; --space-200:8px; --space-300:12px; --space-400:16px; --space-500:20px; --space-600:24px; --space-800:32px; --space-1000:40px; --space-1200:48px; --space-1600:64px; --space-section-y:clamp(64px,9vw,108px); /* vertical rhythm of a section */ --space-gutter:clamp(20px,4vw,40px); /* page side padding */ --space-card-pad:clamp(30px,3.4vw,40px); /* ---------- RADIUS ---------- */ --radius-sm:5px; --radius-md:8px; --radius-lg:14px; --radius-pill:999px; --radius-button:var(--radius-md); --radius-card:var(--radius-lg); /* ---------- LAYOUT / SIZING ---------- */ --layout-header-height:66px; /* sticky header height, drives anchor scroll-margin */ --size-tap-min:44px; /* minimum touch target */ --measure-body:520px; /* max line length for dark-section body copy */ /* ---------- ELEVATION ---------- */ --shadow-card:0 1px 3px rgba(0,0,0,0.06); --shadow-raised:0 12px 28px -18px rgba(0,0,0,0.45); --shadow-panel:0 30px 70px -34px rgba(0,0,0,0.8); --shadow-cta:0 8px 24px -10px rgba(201,168,92,0.5); --shadow-cta-hover:0 14px 30px -10px rgba(201,168,92,0.6); --shadow-cta-lg:0 12px 32px -12px rgba(201,168,92,0.55); --shadow-cta-lg-hover:0 18px 40px -12px rgba(201,168,92,0.65); /* ---------- TYPOGRAPHY ---------- */ --font-serif:'Source Serif 4',serif; /* display + headings: authority */ --font-sans:'IBM Plex Sans',sans-serif; /* body + UI: clarity */ --font-mono:'IBM Plex Mono',monospace; /* labels, numerals, ledger figures */ --text-display:clamp(36px,5.4vw,62px); --text-h2:clamp(28px,4vw,42px); --text-h3:21px; --text-body-lg:clamp(16px,1.6vw,18px); --text-body:15px; --text-label:12px; --leading-tight:1.03; --leading-snug:1.2; --leading-body:1.62; --tracking-display:-0.018em; --tracking-heading:-0.015em; --tracking-label:0.16em; --weight-regular:400; --weight-medium:500; --weight-semibold:600; /* ---------- MOTION ---------- */ --motion-duration-fast:0.2s; /* hovers, links, CTAs */ --motion-duration-medium:0.25s; /* card hover background */ --motion-duration-slow:0.3s; /* card lift / border transitions */ --motion-duration-reveal:0.75s; --motion-duration-count:1.4s; /* hero count-up */ --motion-duration-scan:2.8s; /* audit scan-line sweep */ --motion-ease-standard:cubic-bezier(0.22,1,0.36,1); } /* ---------- 3. MODES ---------- The marketing site is dark-first by design. These modes exist for the future product/dashboard UI and accessibility. Toggle with data-theme on . */ [data-theme="high-contrast"] { /* Lift every muted/faint TEXT role so high-contrast actually reaches it. */ --color-text-muted:var(--cream); --color-text-subtle:var(--cream); --color-text-support:var(--slate-100); --color-text-soft:var(--slate-100); --color-text-faint:var(--slate-100); --color-text-disclaimer:var(--slate-300); --color-text-faintest:var(--slate-300); --color-text-figure:var(--cream-hi); --color-text-primary-dim:var(--cream-hi); --color-text-on-featured:var(--cream); --color-text-on-paper-body:var(--paper-ink); --color-text-on-paper-muted:var(--paper-ink); --color-border-subtle:var(--slate-400); --color-border-strong:var(--slate-300); } /* Light theme scaffold for product UI (not used by the marketing pages). */ [data-theme="light"] { --color-surface-page:var(--paper-300); --color-surface-raised:var(--paper-50); --color-text-heading:var(--paper-ink); --color-text-primary:var(--paper-ink); --color-text-muted:var(--paper-ink-3); --color-border-subtle:var(--line-100); --color-accent:var(--gold-700); } /* ---------- GLOBAL ACCESSIBILITY ---------- */ ::selection { background:var(--selection-bg); color:var(--color-text-selection); } .cf-skip { position:absolute; left:var(--space-400); top:calc(-1 * (var(--layout-header-height) + var(--space-800))); z-index:100; background:var(--gold-500); color:var(--color-text-on-accent); font-family:var(--font-sans); font-weight:var(--weight-semibold); font-size:14px; padding:var(--space-300) var(--space-400); border-radius:var(--radius-md); text-decoration:none; transition:top var(--motion-duration-fast) var(--motion-ease-standard); } .cf-skip:focus { top:var(--space-400); } :focus-visible { outline:2px solid var(--color-border-focus); outline-offset:2px; border-radius:var(--radius-sm); } /* Respect reduced-motion: kill all animation + force revealed content visible. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } [data-reveal] { opacity:1 !important; transform:none !important; } }