/* ============================================================
TMB Product Group — Design Tokens (colors + type)
Source of truth: reference/tmb-tokens.json + reference/tmb-design-system-v0.4.html
Import in any page:
============================================================ */
/* ---------- Fonts ----------
Inter, IBM Plex Mono, Instrument Serif are loaded from Google Fonts
via in each HTML . System-font fallbacks
are defined in the type-family tokens below.
-------------------------------------------------------------------- */
/* ============================================================
LAYER 1 — RAW PALETTE (mode-invariant)
============================================================ */
:root {
/* Warm grayscale (warm, not cool — this is a brand decision) */
--gray-50: #fafaf7; /* light mode base bg */
--gray-75: #f4f3ee;
--gray-100: #eceae3;
--gray-150: #dedbd1;
--gray-200: #c9c6bb;
--gray-300: #a8a59a;
--gray-400: #858278; /* neutral midpoint */
--gray-500: #666660;
--gray-600: #4a4a45;
--gray-700: #353531;
--gray-800: #262624;
--gray-850: #202020;
--gray-900: #1a1a1a; /* dark mode base bg */
--gray-950: #111111;
--pure-white: #ffffff;
/* Brand Purple — vibrant, tuned. Single accent across the system. */
--brand-50: #f3effe;
--brand-100: #e4dafc;
--brand-200: #c9b5f9;
--brand-300: #a88bf4;
--brand-400: #9770f0;
--brand-500: #8b5cf6;
--brand-600: #7540dc; /* PRIMARY — same hex both modes */
--brand-700: #5b30ab;
--brand-800: #44247d;
--brand-900: #2a1650;
/* Accent palette — 6 hues, TNE-inspired, single value both modes.
Light mode adds a 1px gray-700 border on small fills (see .status-dot)
to satisfy WCAG 1.4.11 for non-text UI components. */
--color-red: #f2777a;
--color-orange: #f99157;
--color-yellow: #ffcc66;
--color-green: #99cc99;
--color-cyan: #66cccc;
--color-blue: #6699cc;
/* ---------- Type families ---------- */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--font-display: 'Instrument Serif', Georgia, serif; /* italic accents ONLY */
/* ---------- Type scale ---------- */
--text-3xs: 10px; --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px;
--text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px;
--text-2xl: 32px; --text-3xl: 44px; --text-4xl: 60px; --text-5xl: 84px;
--leading-tight: 1.1;
--leading-snug: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
--tracking-tighter: -0.04em;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.04em;
--tracking-wider: 0.08em;
--tracking-widest: 0.12em;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* ---------- Spacing (4px base) ---------- */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--space-9: 96px; --space-10: 128px;
/* ---------- Radius (square-first; small radii only where needed) ---------- */
--radius-sm: 3px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 16px;
--radius-full: 999px;
/* ---------- Motion ---------- */
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 400ms;
--duration-slower: 800ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
/* ---------- Layout ---------- */
--measure-prose: 68ch;
--container-wide: 1280px;
}
/* ============================================================
LAYER 2 — SEMANTIC TOKENS · DARK MODE
============================================================ */
:root[data-theme="dark"], :root:not([data-theme]) {
color-scheme: dark;
--color-bg: var(--gray-900);
--color-bg-raised: var(--gray-850);
--color-bg-elevated: var(--gray-800);
--color-bg-sunken: var(--gray-950);
--color-border-subtle: #2d2d2d;
--color-border-default: #3d3d3d;
--color-border-strong: #525252;
--color-fg-muted: #939085;
--color-fg-subtle: #999999;
--color-fg: #cccccc;
--color-fg-strong: #f2f2f2;
--color-brand: var(--brand-600);
--color-brand-text: var(--brand-400);
--color-brand-accent: var(--brand-300);
--color-brand-hover: var(--brand-500);
--color-brand-active: var(--brand-700);
--color-brand-muted: var(--brand-800);
--color-brand-subtle: var(--brand-900);
--color-brand-on-brand: #f2f2f2;
--color-status-error: var(--color-red);
--color-status-warn: var(--color-yellow);
--color-status-success: var(--color-green);
--color-status-info: var(--color-blue);
--color-accent-orange: var(--color-orange);
--color-accent-cyan: var(--color-cyan);
--elevation-1: 0 1px 0 rgba(255,255,255,0.02), 0 1px 3px rgba(0,0,0,0.35);
--elevation-2: 0 1px 0 rgba(255,255,255,0.03), 0 4px 12px rgba(0,0,0,0.45);
--elevation-3: 0 1px 0 rgba(255,255,255,0.04), 0 12px 32px rgba(0,0,0,0.55);
--weight-display: var(--weight-bold);
--focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-brand-hover);
}
/* ============================================================
LAYER 2 — SEMANTIC TOKENS · LIGHT MODE
============================================================ */
:root[data-theme="light"] {
color-scheme: light;
--color-bg: var(--gray-50);
--color-bg-raised: var(--pure-white);
--color-bg-elevated: var(--gray-75);
--color-bg-sunken: var(--gray-100);
--color-border-subtle: var(--gray-150);
--color-border-default: var(--gray-200);
--color-border-strong: var(--gray-300);
--color-fg-muted: var(--gray-500);
--color-fg-subtle: var(--gray-500);
--color-fg: var(--gray-700);
--color-fg-strong: var(--gray-900);
--color-brand: var(--brand-600);
--color-brand-text: var(--brand-600);
--color-brand-accent: var(--brand-700);
--color-brand-hover: var(--brand-700);
--color-brand-active: var(--brand-800);
--color-brand-muted: var(--brand-100);
--color-brand-subtle: var(--brand-50);
--color-brand-on-brand: var(--pure-white);
--color-status-error: var(--color-red);
--color-status-warn: var(--color-yellow);
--color-status-success: var(--color-green);
--color-status-info: var(--color-blue);
--color-accent-orange: var(--color-orange);
--color-accent-cyan: var(--color-cyan);
--elevation-1: 0 1px 2px rgba(30,25,20,0.04), 0 2px 4px rgba(30,25,20,0.04);
--elevation-2: 0 2px 4px rgba(30,25,20,0.05), 0 8px 20px rgba(30,25,20,0.07);
--elevation-3: 0 4px 8px rgba(30,25,20,0.06), 0 16px 40px rgba(30,25,20,0.1);
--weight-display: var(--weight-semibold);
--focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-brand);
}
/* ============================================================
ELEMENT-LEVEL SEMANTICS
Use these for body copy, headings, code, etc. without having
to re-define the rules every time.
============================================================ */
html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
background: var(--color-bg);
}
body {
margin: 0;
background: var(--color-bg);
color: var(--color-fg);
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
font-feature-settings: 'ss01', 'cv01', 'cv02';
}
/* ---------- Display / heading hierarchy ---------- */
.t-display, h1.t-display {
font-family: var(--font-sans);
font-size: var(--text-5xl);
font-weight: var(--weight-display);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tighter);
color: var(--color-fg-strong);
}
h1, .t-h1 {
font-family: var(--font-sans);
font-size: var(--text-4xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-fg-strong);
}
h2, .t-h2 {
font-family: var(--font-sans);
font-size: var(--text-3xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-fg-strong);
}
h3, .t-h3 {
font-family: var(--font-sans);
font-size: var(--text-2xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
color: var(--color-fg-strong);
}
h4, .t-h4 {
font-family: var(--font-sans);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
color: var(--color-fg-strong);
}
/* The editorial italic — signature move. Use sparingly. */
.t-accent, em.t-accent {
font-family: var(--font-display);
font-style: italic;
font-weight: var(--weight-regular);
color: var(--color-brand-accent);
letter-spacing: 0;
}
/* Body prose */
p, .t-body {
font-family: var(--font-sans);
font-size: var(--text-md);
line-height: var(--leading-relaxed);
color: var(--color-fg);
}
.t-body-sm {
font-family: var(--font-sans);
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--color-fg);
}
/* Editorial lede (italic serif) */
.t-lede {
font-family: var(--font-display);
font-style: italic;
font-size: var(--text-xl);
line-height: var(--leading-snug);
color: var(--color-fg-subtle);
max-width: 58ch;
}
/* Monospace eyebrow / label — the branded "§ NAV" look */
.t-eyebrow {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
color: var(--color-fg-muted);
}
.t-eyebrow--brand::before { content: '§ '; color: var(--color-brand-text); }
.t-caption, small {
font-family: var(--font-mono);
font-size: var(--text-2xs);
color: var(--color-fg-muted);
letter-spacing: var(--tracking-wide);
}
/* Inline code / mono tag */
code, .t-code {
font-family: var(--font-mono);
font-size: 0.88em;
background: var(--color-bg-elevated);
padding: 1px 5px;
border-radius: var(--radius-sm);
color: var(--color-brand-text);
border: 1px solid var(--color-border-subtle);
}
a, .t-link {
color: var(--color-fg-strong);
text-decoration: none;
border-bottom: 1px solid var(--color-border-default);
padding-bottom: 1px;
transition: color var(--duration-base) var(--ease-standard),
border-color var(--duration-base) var(--ease-standard);
}
a:hover, .t-link:hover {
color: var(--color-brand-text);
border-color: var(--color-brand-text);
}
hr {
border: 0;
height: 1px;
background: var(--color-border-subtle);
margin: var(--space-5) 0;
}
::selection { background: var(--color-brand-muted); color: var(--color-fg-strong); }
/* ---------- Status indicator dot ----------
Small colored square for dense tables, inline status, etc.
Pair with an explicit background color (e.g. var(--color-status-warn)).
Light mode gets a 1px border so the shape is perceivable without
sacrificing hue fidelity in the fill. */
.status-dot {
display: inline-block;
width: 14px;
height: 14px;
border-radius: var(--radius-sm);
vertical-align: middle;
flex-shrink: 0;
}
:root[data-theme="light"] .status-dot {
border: 1px solid var(--gray-700);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}