124 lines
3.3 KiB
CSS
124 lines
3.3 KiB
CSS
|
/* MeshiTrack design tokens */
|
||
|
|
|
||
|
|
:root {
|
||
|
|
/* Type */
|
||
|
|
--font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
|
||
|
|
--font-display: 'Fraunces', 'Inter Tight', serif;
|
||
|
|
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
|
||
|
|
|
||
|
|
/* Neutrals (warm off-white → near-black) */
|
||
|
|
--bg: #f6f4ef;
|
||
|
|
--bg-elev: #ffffff;
|
||
|
|
--bg-inset: #efebe3;
|
||
|
|
--border: #e4dfd4;
|
||
|
|
--border-strong: #cfc8b8;
|
||
|
|
--ink-faint: #a39b89;
|
||
|
|
--ink-muted: #6e6759;
|
||
|
|
--ink: #1d1b17;
|
||
|
|
--ink-strong: #0b0a08;
|
||
|
|
|
||
|
|
/* Brand — refined sage-leaning green (was straight green) */
|
||
|
|
--brand: #2f6b4a;
|
||
|
|
--brand-deep: #1e4a32;
|
||
|
|
--brand-ink: #ffffff;
|
||
|
|
--brand-soft: #e6efe8;
|
||
|
|
--brand-soft-ink: #1e4a32;
|
||
|
|
|
||
|
|
/* Status */
|
||
|
|
--danger: #b8361a;
|
||
|
|
--danger-soft: #fbe8e0;
|
||
|
|
--warn: #a66a0a;
|
||
|
|
--warn-soft: #f9ecd2;
|
||
|
|
--ok: #3e7a4c;
|
||
|
|
--ok-soft: #e3ede0;
|
||
|
|
--info: #3a5a85;
|
||
|
|
--info-soft: #e1e8f1;
|
||
|
|
|
||
|
|
/* Data viz (cabinet categories / charts) */
|
||
|
|
--viz-1: #2f6b4a;
|
||
|
|
--viz-2: #a66a0a;
|
||
|
|
--viz-3: #3a5a85;
|
||
|
|
--viz-4: #8a4c6e;
|
||
|
|
--viz-5: #6b6237;
|
||
|
|
--viz-6: #7a3a28;
|
||
|
|
|
||
|
|
/* Shape */
|
||
|
|
--r-xs: 6px;
|
||
|
|
--r-sm: 10px;
|
||
|
|
--r-md: 14px;
|
||
|
|
--r-lg: 20px;
|
||
|
|
--r-xl: 28px;
|
||
|
|
|
||
|
|
/* Shadow */
|
||
|
|
--shadow-sm: 0 1px 2px rgba(20, 18, 10, 0.04), 0 0 0 1px rgba(20, 18, 10, 0.04);
|
||
|
|
--shadow-md: 0 4px 16px -6px rgba(20, 18, 10, 0.08), 0 0 0 1px rgba(20, 18, 10, 0.05);
|
||
|
|
--shadow-lg: 0 20px 40px -20px rgba(20, 18, 10, 0.22), 0 0 0 1px rgba(20, 18, 10, 0.06);
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-theme='dark'] {
|
||
|
|
--bg: #141310;
|
||
|
|
--bg-elev: #1c1b17;
|
||
|
|
--bg-inset: #100f0c;
|
||
|
|
--border: #2a2823;
|
||
|
|
--border-strong: #3a372f;
|
||
|
|
--ink-faint: #6a6559;
|
||
|
|
--ink-muted: #9a9386;
|
||
|
|
--ink: #ece8de;
|
||
|
|
--ink-strong: #f8f5ec;
|
||
|
|
|
||
|
|
--brand: #5fa87b;
|
||
|
|
--brand-deep: #8fc9a4;
|
||
|
|
--brand-ink: #0b0a08;
|
||
|
|
--brand-soft: #1e2c23;
|
||
|
|
--brand-soft-ink: #8fc9a4;
|
||
|
|
|
||
|
|
--danger: #e37358;
|
||
|
|
--danger-soft: #2c1a15;
|
||
|
|
--warn: #d6a152;
|
||
|
|
--warn-soft: #2c2217;
|
||
|
|
--ok: #7aba89;
|
||
|
|
--ok-soft: #1a2820;
|
||
|
|
--info: #7ea3cf;
|
||
|
|
--info-soft: #1a2028;
|
||
|
|
|
||
|
|
--viz-1: #5fa87b;
|
||
|
|
--viz-2: #d6a152;
|
||
|
|
--viz-3: #7ea3cf;
|
||
|
|
--viz-4: #c088a5;
|
||
|
|
--viz-5: #b8ac76;
|
||
|
|
--viz-6: #d88a74;
|
||
|
|
|
||
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
|
||
|
|
--shadow-md: 0 4px 16px -6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
||
|
|
--shadow-lg: 0 20px 40px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||
|
|
}
|
||
|
|
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
html, body { margin: 0; padding: 0; }
|
||
|
|
body {
|
||
|
|
font-family: var(--font-sans);
|
||
|
|
font-feature-settings: 'ss01', 'cv11';
|
||
|
|
color: var(--ink);
|
||
|
|
background: var(--bg);
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 1.45;
|
||
|
|
letter-spacing: -0.005em;
|
||
|
|
transition: background-color 0.2s, color 0.2s;
|
||
|
|
}
|
||
|
|
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
|
||
|
|
input, select, textarea { font: inherit; color: inherit; }
|
||
|
|
a { color: inherit; text-decoration: none; }
|
||
|
|
|
||
|
|
::selection { background: var(--brand); color: var(--brand-ink); }
|
||
|
|
|
||
|
|
/* Scrollbars */
|
||
|
|
::-webkit-scrollbar { width: 10px; height: 10px; }
|
||
|
|
::-webkit-scrollbar-track { background: transparent; }
|
||
|
|
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 2px solid var(--bg); }
|
||
|
|
|
||
|
|
.mono { font-family: var(--font-mono); }
|
||
|
|
.serif { font-family: var(--font-display); }
|
||
|
|
.num { font-variant-numeric: tabular-nums; }
|