@layer base { /* utility */ :root { /* Layout */ /* Size */ --size-none: 0; --size-one: 1px; /* 1px */ --size-two: 2px; /* 2px */ --size-5xs: 0.25rem; /* 4px */ --size-4xs: 0.5rem; /* 8px */ --size-3xs: 0.75rem; /* 12px */ --size-2xs: 0.9375rem; /* 15px */ --size-xs: 1.125rem; /* 18px */ --size-s: 1.5rem; /* 24px */ --size-m: 2rem; /* 32px */ --size-l: 3rem; /* 48px */ --size-xl: 4.5rem; /* 72px */ --size-2xl: 6rem; /* 96px */ --size-3xl: 9rem; /* 144px */ --size-4xl: 13.5rem; /* 216px */ --size-5xl: 20rem; /* 320px */ /* Spacing */ --space-base: 0.75rem; --space-ratio: 1.4; --space-auto: auto; --space-none: 0; --space-one: 1px; --space-two: 2px; --space-4xs: calc(var(--space-base) / var(--space-ratio) / var(--space-ratio) / var(--space-ratio) / var(--space-ratio) / var(--space-ratio)); --space-3xs: calc(var(--space-base) / var(--space-ratio) / var(--space-ratio) / var(--space-ratio) / var(--space-ratio)); --space-2xs: calc(var(--space-base) / var(--space-ratio) / var(--space-ratio) / var(--space-ratio)); --space-xs: calc(var(--space-base) / var(--space-ratio) / var(--space-ratio)); --space-s: calc(var(--space-base) / var(--space-ratio)); --space-m: var(--space-base); --space-l: calc(var(--space-base) * var(--space-ratio)); --space-xl: calc(var(--space-base) * var(--space-ratio) * var(--space-ratio)); --space-2xl: calc(var(--space-base) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio)); --space-3xl: calc(var(--space-base) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio)); --space-4xl: calc(var(--space-base) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio) * var(--space-ratio)); /* Radius */ --radius-none: 0; --radius-full: 9999px; --radius-xs: 0.25rem; /* 4px */ --radius-s: 0.5rem; /* 6px */ --radius-m: 0.75rem; /* 12px */ --radius-l: 1rem; /* 16px */ --radius-xl: 1.5rem; /* 24px */ --radius-square-xs: 10%; --radius-square-s: 15%; --radius-square-m: 20%; --radius-square-l: 15%; --radius-square-xl: 30%; /* Max Width */ --max-width-xs: 20rem; /* ~320px — small cards, sidebars */ --max-width-s: 30rem; /* ~480px — narrow reading, forms */ --max-width-m: 45rem; /* ~720px — ideal reading width */ --max-width-l: 60rem; /* ~960px — wide content sections */ --max-width-xl: 75rem; /* ~1200px — full-width layouts */ } :root { /* Typography */ --font-base: clamp(1rem, 0.5vw + 0.75rem, 1.25rem); --font-scale: 1.2; --font-size-2xs: calc(var(--font-base) / var(--font-scale) / var(--font-scale) / var(--font-scale)); --font-size-xs: calc(var(--font-base) / var(--font-scale) / var(--font-scale)); --font-size-s: calc(var(--font-base) / var(--font-scale)); --font-size-m: var(--font-base); --font-size-l: calc(var(--font-base) * var(--font-scale)); --font-size-xl: calc(var(--font-base) * var(--font-scale) * var(--font-scale)); --font-size-2xl: calc(var(--font-base) * var(--font-scale) * var(--font-scale) * var(--font-scale)); --font-size-3xl: calc(var(--font-base) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale)); --font-size-4xl: calc(var(--font-base) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale)); --font-size-5xl: calc(var(--font-base) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale)); --font-weight-xs: 100; --font-weight-s: 300; --font-weight-m: 400; --font-weight-l: 500; --font-weight-xl: 600; --font-weight-2xl: 700; --font-weight-3xl: 900; --font-family-sans: "Inter", Verdana, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-family-serif: "Charter", "Source Serif 4", Georgia, "Times New Roman", Times, serif; --font-family-latin: "STIX Two Math", "Latin Modern Math", "Cambria Math", serif; --font-family-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", Consolas, monospace; --line-height-xs: 1; --line-height-s: 1.2; --line-height-m: 1.5; --line-height-l: 1.6; --line-height-xl: 2; --letter-spacing-xs: -0.02em; --letter-spacing-s: -0.01em; --letter-spacing-m: 0; --letter-spacing-l: 0.01em; --letter-spacing-xl: 0.02em; } :root { /* Color */ --theme-4xd: oklch(calc(var(--theme-value-base) - 5*var(--theme-value-step)) calc(var(--theme-chroma) * 0.30) var(--theme-hue)); --theme-3xd: oklch(calc(var(--theme-value-base) - 4*var(--theme-value-step)) calc(var(--theme-chroma) * 0.40) var(--theme-hue)); --theme-2xd: oklch(calc(var(--theme-value-base) - 3*var(--theme-value-step)) calc(var(--theme-chroma) * 0.60) var(--theme-hue)); --theme-xd: oklch(calc(var(--theme-value-base) - 2*var(--theme-value-step)) calc(var(--theme-chroma) * 0.80) var(--theme-hue)); --theme-d: oklch(calc(var(--theme-value-base) - 1*var(--theme-value-step)) calc(var(--theme-chroma) * 0.90) var(--theme-hue)); --theme-m: oklch(calc(var(--theme-value-base) + 0*var(--theme-value-step)) calc(var(--theme-chroma) * 1.00) var(--theme-hue)); --theme-l: oklch(calc(var(--theme-value-base) + 1*var(--theme-value-step)) calc(var(--theme-chroma) * 0.90) var(--theme-hue)); --theme-xl: oklch(calc(var(--theme-value-base) + 2*var(--theme-value-step)) calc(var(--theme-chroma) * 0.85) var(--theme-hue)); --theme-2xl: oklch(calc(var(--theme-value-base) + 3*var(--theme-value-step)) calc(var(--theme-chroma) * 0.65) var(--theme-hue)); --theme-3xl: oklch(calc(var(--theme-value-base) + 4*var(--theme-value-step)) calc(var(--theme-chroma) * 0.40) var(--theme-hue)); --theme-4xl: oklch(calc(var(--theme-value-base) + 5*var(--theme-value-step)) calc(var(--theme-chroma) * 0.30) var(--theme-hue)); --dark--1 : oklch(0.05 0 0); --dark-0 : oklch(0.10 0 0); --dark-1 : oklch(0.15 0 0); --dark-2 : oklch(0.20 0 0); --dark-3 : oklch(0.25 0 0); --dark-4 : oklch(0.30 0 0); --dark-5 : oklch(0.35 0 0); --dark-6 : oklch(0.40 0 0); --dark-7 : oklch(0.45 0 0); --gray : oklch(0.50 0 0); --light-7 : oklch(0.55 0 0); --light-6 : oklch(0.60 0 0); --light-5 : oklch(0.65 0 0); --light-4 : oklch(0.70 0 0); --light-3 : oklch(0.75 0 0); --light-2 : oklch(0.80 0 0); --light-1 : oklch(0.85 0 0); --light-0 : oklch(0.90 0 0); --light--1 : oklch(0.95 0 0); --dim-red: oklch(0.30 0.08 25); --dim-orange: oklch(0.35 0.08 55); --dim-yellow: oklch(0.40 0.06 95); --dim-green: oklch(0.32 0.08 145); --dim-cyan: oklch(0.33 0.07 195); --dim-blue: oklch(0.28 0.08 250); --dim-purple: oklch(0.28 0.08 295); --dim-magenta: oklch(0.30 0.09 330); --mid-red: oklch(0.52 0.14 25); --mid-orange: oklch(0.56 0.14 55); --mid-yellow: oklch(0.60 0.12 95); --mid-green: oklch(0.54 0.14 145); --mid-cyan: oklch(0.55 0.13 195); --mid-blue: oklch(0.50 0.14 250); --mid-purple: oklch(0.50 0.14 295); --mid-magenta: oklch(0.52 0.15 330); --sharp-red: oklch(0.65 0.28 25); --sharp-orange: oklch(0.78 0.24 55); --sharp-yellow: oklch(0.90 0.18 95); --sharp-green: oklch(0.78 0.22 145); --sharp-cyan: oklch(0.82 0.18 195); --sharp-blue: oklch(0.70 0.20 250); --sharp-purple: oklch(0.68 0.22 295); --sharp-magenta: oklch(0.72 0.26 330); --bright-red: oklch(0.88 0.20 25); --bright-orange: oklch(0.90 0.20 55); --bright-yellow: oklch(0.93 0.18 95); --bright-green: oklch(0.90 0.19 145); --bright-cyan: oklch(0.91 0.17 195); --bright-blue: oklch(0.88 0.18 250); --bright-purple: oklch(0.88 0.19 295); --bright-magenta: oklch(0.89 0.20 330); --pale-red: oklch(0.95 0.16 25); --pale-orange: oklch(0.95 0.16 55); --pale-yellow: oklch(0.97 0.14 95); --pale-green: oklch(0.95 0.16 145); --pale-cyan: oklch(0.95 0.14 195); --pale-blue: oklch(0.94 0.16 250); --pale-purple: oklch(0.94 0.16 295); --pale-magenta: oklch(0.95 0.18 330); } :root { /* Motion */ --time-instant: 0.05s; --time-xs: 0.125s; --time-s: 0.25s; --time-m: 0.50s; --time-l: 1.00s; --time-xl: 1.50s; --time-xxl: 2.00s; --ease-standard: cubic-bezier(0.4, 0, 0.4, 1); } }