File size: 2,354 Bytes
4db51d5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | /* ── Palette & Design Tokens ──────────────────────────── */
:root {
/* Colors */
--bg: #0B1527;
--bg-opaque: rgba(11, 21, 39, 0.45);
--teal: #58b1c3;
--green: #6fcf97;
--red: #ff4d6d;
--pink: #ff6ec7;
--purple: #9b5de5;
--blue: #007F9E;
--neutral: #98A6AF;
--text: #e8e8e8;
--text-muted: #8899aa;
--text-dim: #5a6a7a;
--border: rgba(255, 255, 255, 0.15);
--btn-hover-bg: rgba(255, 255, 255, 0.03);
--btn-active-bg: rgba(88, 177, 195, 0.12);
--btn-active-border: rgba(88, 177, 195, 0.3);
--row-hover-bg: rgba(255, 255, 255, 0.02);
--row-border: rgba(255, 255, 255, 0.03);
--code-bg: rgba(88, 177, 195, 0.1);
--tooltip-bg: #2c3e50;
--tooltip-text: #f1f1f1;
--tooltip-body: #d9d9d9;
/* Typography scale */
--text-sm: 0.75rem; /* secondary text, small UI */
--text-md: 1rem; /* body text, subtitles, descriptions */
--text-lg: 1.25rem; /* section headings */
/* Spacing scale */
--space-xs: 0.25rem; /* tiny gaps: legend rows, label margins */
--space-sm: 0.5rem; /* small: icon gaps, dot gaps, table cell vertical */
--space-ms: 0.75rem; /* medium-small: table cell horizontal, sidebar padding */
--space-md: 1rem; /* standard: flex gaps, element margins */
--space-lg: 1.5rem; /* section internal spacing */
--space-xl: 2rem; /* major section padding */
--space-2xl: 3rem; /* large section breaks */
}
/* ── Reset & Base Typography ─────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 20px;
background: radial-gradient(
60rem 40rem at 50% -45px,
rgba(0, 226, 213, 0.35),
rgba(18, 208, 254, 0.25) 30%,
transparent 70%
), var(--bg);
}
body {
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: var(--text);
font-size: var(--text-md);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
position: relative;
}
code {
background: var(--code-bg);
color: var(--teal);
padding: 0.15em 0.45em;
border-radius: 4px;
font-size: 0.95em;
}
|