87 lines
2.5 KiB
CSS
87 lines
2.5 KiB
CSS
/* Respellion Design System — tokens */
|
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=JetBrains+Mono:wght@400;500;700&display=swap');
|
|
|
|
:root {
|
|
/* Colors — core */
|
|
--teal: #1F5560;
|
|
--teal-900: #183E46;
|
|
--teal-700: #2A6C78;
|
|
--purple: #5C1DD8;
|
|
--purple-700: #4A17AE;
|
|
--sage: #CDD8BB;
|
|
--peri: #AFC0FF;
|
|
--tan: #B1A089;
|
|
--cream: #ECE9E9;
|
|
--ink: #3C3A3A;
|
|
--paper: #FFFFFF;
|
|
|
|
/* Semantic */
|
|
--fg: var(--ink);
|
|
--fg-muted: rgba(60,58,58,0.65);
|
|
--fg-subtle: rgba(60,58,58,0.45);
|
|
--bg: var(--paper);
|
|
--bg-warm: var(--cream);
|
|
--bg-dark: var(--teal);
|
|
--accent: var(--purple);
|
|
--accent-soft: var(--peri);
|
|
--success: var(--sage);
|
|
|
|
/* Type stacks */
|
|
--font-sans: "Space Grotesk", system-ui, sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
/* Type scale */
|
|
--t-display: clamp(44px, 8vw, 112px);
|
|
--t-h1: clamp(40px, 5.5vw, 72px);
|
|
--t-h2: clamp(32px, 4vw, 52px);
|
|
--t-h3: 26px;
|
|
--t-lead: 19px;
|
|
--t-body: 17px;
|
|
--t-small: 15px;
|
|
--t-label: 11px; /* JetBrains Mono, uppercase, letterspacing .14em */
|
|
--label-ls: 0.14em;
|
|
|
|
/* Spacing */
|
|
--s-1: 4px;
|
|
--s-2: 8px;
|
|
--s-3: 12px;
|
|
--s-4: 16px;
|
|
--s-5: 24px;
|
|
--s-6: 32px;
|
|
--s-7: 48px;
|
|
--s-8: 64px;
|
|
--s-9: 96px;
|
|
--s-10: 144px;
|
|
|
|
/* Radii */
|
|
--r-sm: 12px;
|
|
--r-md: 22px;
|
|
--r-lg: 28px;
|
|
--r-xl: 40px;
|
|
--r-2xl: 56px;
|
|
--r-pill: 9999px;
|
|
--r-org: 48% 52% 62% 38% / 50% 44% 56% 50%;
|
|
--r-org2: 60% 40% 45% 55% / 38% 62% 38% 62%;
|
|
|
|
/* Shadow */
|
|
--shadow-pill: 0 14px 40px rgba(24,62,70,0.35);
|
|
--shadow-soft: 0 12px 40px rgba(0,0,0,0.08);
|
|
|
|
/* Layout */
|
|
--max: 1320px;
|
|
|
|
/* Section padding rhythm */
|
|
--sec-y: clamp(80px, 10vw, 144px);
|
|
}
|
|
|
|
/* Semantic element mappings */
|
|
body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
|
|
h1 { font: 700 var(--t-h1)/0.98 var(--font-sans); letter-spacing: -0.01em; color: var(--teal); }
|
|
h2 { font: 700 var(--t-h2)/1.0 var(--font-sans); letter-spacing: -0.01em; color: var(--teal); }
|
|
h3 { font: 700 var(--t-h3)/1.15 var(--font-sans); color: var(--teal); }
|
|
p { font: 400 var(--t-body)/1.6 var(--font-sans); }
|
|
code, .mono { font-family: var(--font-mono); }
|
|
.label { font: 500 var(--t-label)/1 var(--font-mono); letter-spacing: var(--label-ls); text-transform: uppercase; }
|
|
|
|
::selection { background: var(--purple); color: var(--paper); }
|