/* * tokens.semantic.css * * Semantic design tokens. Components consume ONLY these tokens — never * primitives directly, never raw hex values. * * Structure: * :root — shared defaults (apply to all surfaces) * [data-surface] — per-surface overrides * * Usage: set data-surface="report|admin-client|admin-internal|login" * on the or page root. The correct theme activates automatically. * * Depends on: tokens.primitives.css (must be loaded first) */ /* ══════════════════════════════════════════════════════════════════════════ SHARED DEFAULTS Inherited by all surfaces unless overridden below. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Color roles ────────────────────────────────────────────────────── */ --color-bg: var(--slate-50); /* page background */ --color-surface: var(--white); /* card / panel background */ --color-surface-subtle: var(--slate-100); /* zebra rows, inset sections */ --color-border: var(--slate-200); /* standard borders */ --color-border-strong: var(--slate-300); /* form field borders */ --color-text: var(--slate-900); /* body text */ --color-text-muted: var(--slate-600); /* captions, labels */ --color-text-faint: var(--slate-400); /* placeholders, hints */ --color-text-strong: var(--slate-950); /* headings, strong emphasis */ --color-accent: var(--blue-600); /* primary interactive */ --color-accent-hover: var(--blue-700); /* interactive hover */ --color-accent-subtle: var(--blue-tint); /* accent background tint */ /* State colors */ --color-error: var(--red-700); --color-error-bg: var(--red-100); --color-error-border: var(--red-200); --color-error-text: var(--red-800); --color-success: var(--green-600); --color-success-bg: var(--green-100); --color-warning: var(--amber-500); --color-warning-bg: var(--amber-100); --color-warning-border: var(--amber-200); --color-warning-text: var(--amber-700); /* Brand — client-overridable at the org level */ --color-brand: var(--green-brand); --color-brand-secondary: var(--purple-brand); /* Shell (nav, header, footer) */ --color-shell-bg: var(--black-shell); --color-shell-border: rgba(255, 255, 255, 0.10); --color-shell-shadow: rgba(0, 0, 0, 0.30); /* ── Typography roles ───────────────────────────────────────────────── */ --font-ui: var(--font-sans); --font-code: var(--font-mono); --font-table: var(--font-data); --text-h1: var(--text-7xl); /* 30px — page headings */ --text-h2: var(--text-2xl); /* 18px — section headings */ --text-h3: var(--text-xl); /* 16px — subsection headings */ --text-body: var(--text-md); /* 14px — body text */ --text-label: var(--text-sm); /* 12px — field labels, table headers */ --text-caption: var(--text-xs); /* 11px — hints, meta */ --text-micro: var(--text-2xs); /* 10px — badge counts */ --text-input: var(--text-lg); /* 15px — form inputs */ --weight-ui: var(--weight-normal); --weight-label: var(--weight-bold); /* uppercase labels are always bold */ --weight-heading: var(--weight-bold); --weight-strong: var(--weight-extrabold); --tracking-label: var(--tracking-wide); /* 0.08em — uppercase labels */ --tracking-heading: var(--tracking-tight); /* ── Spacing roles ──────────────────────────────────────────────────── */ --space-control-y: var(--space-3); /* 8px — button/input vertical padding */ --space-control-x: var(--space-4); /* 10px — button/input horizontal padding */ --space-card: var(--space-6); /* 14px — card internal padding */ --space-section: var(--space-9); /* 20px — between sections */ --space-gap: var(--space-5); /* 12px — between sibling cards */ /* ── Shape roles ────────────────────────────────────────────────────── */ --radius-interactive: var(--radius-control); /* buttons, inputs, selects */ --radius-surface: var(--radius-card); /* cards, panels */ /* ── Shadow roles ───────────────────────────────────────────────────── */ --shadow-surface: var(--shadow-sm); /* standard card shadow */ --shadow-overlay: var(--shadow-lg); /* modals, drawers */ --shadow-input: var(--shadow-inset-top); /* input top highlight */ /* ── Motion roles ───────────────────────────────────────────────────── */ --transition-ui: var(--transition-interactive); /* ── Z-index roles ──────────────────────────────────────────────────── */ --z-float: var(--z-dropdown); --z-picker: var(--z-datepicker); --z-dialog: var(--z-modal); --z-top: var(--z-overlay); } /* ══════════════════════════════════════════════════════════════════════════ REPORT SURFACE Client-facing reports. Presentation-grade. Blue-tinted palette. Generous spacing. Larger radii. Rich display headings. ══════════════════════════════════════════════════════════════════════════ */ [data-surface="report"] { --color-border: var(--blue-border); /* #dbe4ef — blue-tinted card borders */ --color-surface-subtle: var(--blue-tint); /* #f8fbff — micro-background rows */ --color-accent-subtle: var(--blue-50); /* Display text — large headings and insight card titles */ --color-text-display: var(--navy-display); /* #172033 */ /* Card radius is larger on report surface */ --radius-surface: var(--radius-card-report); /* 20px */ /* Section spacing is more generous */ --space-section: var(--space-10); /* 24px */ --space-card: var(--space-8); /* 18px */ /* Report header background (logo + controls bar) */ --report-header-bg: radial-gradient(circle at top right, rgba(191, 219, 254, 0.28), transparent 36%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); --report-header-border: var(--blue-border); /* Insight card — cool variant ("What this means") */ --insight-cool-bg: radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 36%), linear-gradient(180deg, #ffffff 0%, #f6faff 100%); --insight-cool-stripe: linear-gradient(90deg, var(--blue-600) 0%, #0ea5e9 100%); /* Insight card — warm variant ("Best use cases") */ --insight-warm-bg: radial-gradient(circle at top left, rgba(251, 191, 36, 0.10), transparent 36%), linear-gradient(180deg, #ffffff 0%, #fffaf0 100%); --insight-warm-stripe: linear-gradient(90deg, var(--amber-500) 0%, var(--amber-600) 100%); } /* ══════════════════════════════════════════════════════════════════════════ ADMIN-CLIENT SURFACE Admin pages clients can see. Branded but functional. Uses shared defaults — overrides only where client-facing pages diverge from admin-internal density. ══════════════════════════════════════════════════════════════════════════ */ [data-surface="admin-client"] { /* Slightly larger body text than admin-internal */ --text-body: var(--text-md); /* 14px */ --text-label: var(--text-sm); /* 12px */ /* Comfortable control sizing */ --space-control-y: var(--space-4); /* 10px */ --space-control-x: var(--space-6); /* 14px */ --space-card: var(--space-6); /* 14px */ } /* ══════════════════════════════════════════════════════════════════════════ ADMIN-INTERNAL SURFACE Internal tooling only — clients never see this. Utilitarian and dense. Neutral palette, information-first, smaller type, tighter spacing. ══════════════════════════════════════════════════════════════════════════ */ [data-surface="admin-internal"] { /* Denser type */ --text-body: var(--text-base); /* 13px */ --text-label: var(--text-sm); /* 12px */ --text-h1: var(--text-4xl); /* 22px — page headings are smaller */ --text-h2: var(--text-2xl); /* 18px */ /* Tighter spacing */ --space-control-y: var(--space-3); /* 8px */ --space-control-x: var(--space-4); /* 10px */ --space-card: var(--space-5); /* 12px */ --space-section: var(--space-6); /* 14px */ --space-gap: var(--space-4); /* 10px */ /* No decorative shadows — flat and functional */ --shadow-surface: none; } /* ══════════════════════════════════════════════════════════════════════════ LOGIN SURFACE Authentication page. Full-screen, dark-background, brand-forward. ══════════════════════════════════════════════════════════════════════════ */ [data-surface="login"] { --color-bg: #000000; --color-surface: rgba(255, 255, 255, 0.06); --color-border: rgba(255, 255, 255, 0.14); --color-text: #ffffff; --color-text-muted: rgba(255, 255, 255, 0.72); --color-text-faint: rgba(255, 255, 255, 0.55); --color-text-strong: #ffffff; --color-accent: var(--purple-brand); --color-accent-hover: var(--purple-light); --radius-surface: var(--radius-card-report); /* 20px — consistent with report */ }