/* Design tokens — themeable (dark default + light), dashboard feel for an API gateway. Neutral slate scale + a single indigo accent; monospace for tokens, endpoints and code. Values are raw RGB triplets consumed by Tailwind via rgb(var(--x) / ). The effective theme is set as `data-theme` on by an inline script (see index.html) and kept in sync by stores/theme.ts. */ :root { color-scheme: dark; /* surfaces */ --t-bg: 9 12 21; /* page background, near-black navy */ --t-surface: 17 22 36; /* cards / panels */ --t-surface-2: 24 31 48; /* raised elements, table headers */ --t-border: 37 45 66; --t-border-strong: 57 67 96; /* text */ --t-text: 228 232 240; --t-text-soft: 148 163 184; --t-text-mute: 100 116 139; /* accent */ --t-accent: 99 102 241; --t-accent-hover: 129 140 248; --t-accent-soft: 99 102 241; /* semantic */ --t-success: 52 211 153; --t-warning: 251 191 36; --t-danger: 248 113 113; --t-info: 56 189 248; /* typography */ --t-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; --t-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* shape */ --t-radius: 0.5rem; --t-radius-sm: 0.375rem; --t-shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.5); --t-shadow-pop: 0 12px 40px -8px rgb(0 0 0 / 0.7); } [data-theme='light'] { color-scheme: light; /* surfaces */ --t-bg: 248 250 252; /* slate-50 page background */ --t-surface: 255 255 255; /* cards / panels */ --t-surface-2: 241 245 249; /* raised elements, table headers */ --t-border: 226 232 240; /* slate-200 */ --t-border-strong: 203 213 225; /* slate-300 */ /* text */ --t-text: 15 23 42; /* slate-900 */ --t-text-soft: 71 85 105; /* slate-600 */ --t-text-mute: 100 116 139; /* slate-500 */ /* accent — indigo-600/700 (darker than the dark theme for white bg) */ --t-accent: 79 70 229; --t-accent-hover: 67 56 202; --t-accent-soft: 99 102 241; /* semantic — 600-level so they stay readable on white */ --t-success: 5 150 105; --t-warning: 217 119 6; --t-danger: 220 38 38; --t-info: 2 132 199; /* shape */ --t-shadow-card: 0 1px 2px rgb(15 23 42 / 0.05), 0 8px 24px -12px rgb(15 23 42 / 0.14); --t-shadow-pop: 0 12px 40px -8px rgb(15 23 42 / 0.2); }