/* ============================================================ Type A — Internal Tooling Design Tokens · v2 Drop-in replacement for tokens.css (v1). Names are STABLE where the value merely changes; new tokens are additive. Direction: clean, minimal, very low noise. Let hierarchy and whitespace do the work; colour marks exceptions, not everything. Source of truth: typeamedia-emdash / src/styles/theme.css ============================================================ */ :root { /* ---- Brand palette (verbatim from site) ---- */ --color-bg: #ffffff; /* cards, table bg */ --color-text: #111827; /* headings, primary numerals */ --color-body: #374151; /* body copy, table cells */ --color-muted: #6b7280; /* secondary / captions */ --color-faint: #9aa3af; /* NEW · tertiary: out-of-scope weeks, placeholders */ --color-border: #e8eaed; /* CHANGED (was #e5e7eb) · softer default divider */ --color-border-subtle: #f0f1f3; /* NEW · hairline row dividers inside dense tables */ --color-surface: #fafbfc; /* CHANGED (was #f9fafd) · calmer, near-white panel */ --color-surface-grey: #f6f7f8; /* CHANGED (was #f5f5f5) · app background, cool neutral */ --color-primary: #29cfa8; /* Type A green — the ONE accent, one primary action per view */ --color-primary-dark: #1eaa8a; /* hover / pressed / links */ --color-primary-light: #5cdfbf; --color-accent: #29cfa8; --color-accent-light: #f9bf18; /* yellow accent — sparing */ --color-link: #1eaa8a; /* CHANGED (was #f9bf18) · in-app links use green, not yellow */ --color-dark: #2b303d; /* navy chrome */ --color-success: #16a34a; /* CHANGED (was #22c55e) · slightly deeper for text-contrast */ --color-warning: #d97706; /* CHANGED (was #f59e0b) · deeper amber, readable on white */ --color-danger: #dc4c3e; --color-info: #2f6fb0; /* ---- Status — TWO tiers now (the core v2 anti-noise move) ---- SOLID = badges, dots, attention items (saturated, high signal) SUBTLE = table-cell fills for EXCEPTIONS ONLY (barely-there wash) FG = accessible text colour on white (AA at 14px) */ --color-success-bg: #e7f7ee; /* badge fill (kept) */ --color-warning-bg: #fdf3d6; /* badge fill (kept) */ --color-danger-bg: #fbe9e7; /* badge fill (kept) */ --color-info-bg: #e8f0f9; /* badge fill (kept) */ --color-primary-bg: #e3f7f1; /* badge fill (kept) */ --status-success-subtle: #f2faf5; /* NEW · table exception wash */ --status-warning-subtle: #fdf8ee; /* NEW */ --status-danger-subtle: #fdf2f0; /* NEW */ --status-success-fg: #137a45; /* NEW · text on white */ --status-warning-fg: #92600c; /* NEW */ --status-danger-fg: #a5342a; /* NEW */ --status-neutral-fg: #6b7280; /* NEW · in-range / no-status */ /* RAG aliases (client-health domain reads in RAG language) */ --rag-red: var(--color-danger); --rag-amber: var(--color-warning); --rag-green: var(--color-success); /* ---- Sidebar (navy chrome) ---- */ --sidebar-bg: #2b303d; --sidebar-item: rgba(255,255,255,0.70); --sidebar-item-hover: #ffffff; --sidebar-active-bg: rgba(41,207,168,0.14); --sidebar-active-fg: #34dcb4; /* CHANGED · brighter green for contrast on navy */ --sidebar-border: rgba(255,255,255,0.07); --sidebar-label: rgba(255,255,255,0.38); /* NEW · section labels in sidebar */ /* ---- Data-viz — calmer sequence (desaturated ~10%, green still leads) ---- */ --chart-1: #29cfa8; /* primary green */ --chart-2: #4a83bd; /* CHANGED · softer blue */ --chart-3: #e0a93c; /* CHANGED · softer gold */ --chart-4: #8b7bb0; /* CHANGED · softer plum */ --chart-5: #d98f5a; /* softer ochre */ --chart-6: #5f6bb0; /* indigo */ --chart-muted: #dfe3e7; /* NEW · context / comparison bars, gridlines-as-bars */ --chart-grid: #f0f1f3; /* CHANGED · fainter gridlines */ --chart-axis: #9aa3af; /* RAG chart fills — slightly muted vs badge colours so a stacked bar isn't a traffic light */ --chart-rag-red: #e2695c; /* NEW */ --chart-rag-amber: #e9b048; /* NEW */ --chart-rag-green: #3fc389; /* NEW */ /* ---- Typography (Rubik; mono for numerals) ---- */ --font-sans: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace; --font-size-xs: 0.75rem; /* 12px — badges, meta ONLY (never data) */ --font-size-sm: 0.875rem; /* 14px — table body, controls, labels (data minimum) */ --font-size-base: 1rem; /* 16px — default body */ --font-size-lg: 1.125rem; /* 18px — card/section titles (was xl-heavy) */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px — page title */ --font-size-3xl: 1.875rem; /* CHANGED 32→30px — supporting stats */ --font-size-4xl: 2.25rem; /* CHANGED 40→36px — the ONE lead stat per view */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Label convention (NEW): labels are sentence-case 12px medium muted. Do NOT uppercase-letterspace every label — reserve caps for table column heads only. */ --label-size: 0.75rem; --label-weight: 500; --label-color: var(--color-muted); /* ---- Spacing (4px base) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* ---- Density (NEW · one dial for all tables) ---- Comfortable is default; set data-density="compact" on a table for the dense matrix. */ --row-h: 44px; /* comfortable data row */ --row-h-compact:38px; /* dense matrix */ --cell-pad-x: 16px; --cell-pad-y: 12px; --cell-pad-y-compact: 8px; /* ---- Radii ---- */ --radius-xs: 4px; /* NEW · tiny chips, dots-with-labels */ --radius-sm: 6px; /* inputs, badges, buttons */ --radius: 10px; /* cards, panels */ --radius-lg: 14px; /* CHANGED 16→14 · modals, drawers */ --radius-full: 9999px; /* ---- Elevation — flatter (borders do separation; shadow only for overlays) ---- */ --shadow-sm: none; /* CHANGED · resting cards use borders, not shadow */ --shadow: 0 1px 2px rgba(17,24,39,0.04); /* CHANGED · barely-there lift when needed */ --shadow-md: 0 6px 20px -8px rgba(17,24,39,0.12); /* menus, popovers, tooltips */ --shadow-lg: 0 18px 44px -16px rgba(17,24,39,0.22); /* drawers, modals */ /* ---- Layout ---- */ --sidebar-width: 240px; /* CHANGED 248→240 */ --sidebar-width-collapsed: 64px; --topbar-height: 56px; /* CHANGED 60→56 · one slimmer chrome layer */ --content-max: 1360px; /* CHANGED · wider working area */ --content-pad: 28px; /* NEW · consistent page gutter */ /* ---- Focus (accessibility — never remove) ---- */ --focus-ring: 0 0 0 3px rgba(41,207,168,0.35); /* NEW · standard token */ --transition-fast: 130ms ease; --transition-base: 200ms ease; /* ---- Documented budgets (not CSS values — enforced in components) ---- --attention-budget: 3 (top-N attention items, rest collapse to a tray) --badge-budget: 2 (signal badges per row, rest collapse to "+N") */ } /* ============================================================ Dark mode — mirrors site dark tokens; recomputes subtle tiers ============================================================ */ :root.dark { --color-bg: #262b36; --color-text: #f5f6f7; --color-body: #d1d5db; --color-muted: #9aa3b2; --color-faint: #6b7383; --color-border: #333a47; --color-border-subtle: #2c323d; --color-surface: #2b303d; --color-surface-grey: #21252e; --color-link: #34dcb4; --status-success-subtle: rgba(34,197,94,0.10); --status-warning-subtle: rgba(217,119,6,0.12); --status-danger-subtle: rgba(220,76,62,0.12); --status-success-fg: #4ade80; --status-warning-fg: #fbbf24; --status-danger-fg: #f4917f; --status-neutral-fg: #9aa3b2; --color-success-bg: rgba(34,197,94,0.16); --color-warning-bg: rgba(217,119,6,0.18); --color-danger-bg: rgba(220,76,62,0.18); --color-info-bg: rgba(47,111,176,0.20); --color-primary-bg: rgba(41,207,168,0.16); --chart-grid: #333a47; --chart-axis: #6b7383; --chart-muted: #3a414e; --shadow: 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 6px 20px -8px rgba(0,0,0,0.50); --shadow-lg: 0 18px 44px -16px rgba(0,0,0,0.60); --focus-ring: 0 0 0 3px rgba(52,220,180,0.40); }