Dodo
89 lines
2.2 KiB
CSS
89 lines
2.2 KiB
CSS
:root {
|
|
/* Colors */
|
|
--color-vermilion-pulse: #ff3b1f;
|
|
--color-cobalt-glow: #5683d2;
|
|
--color-obsidian: #0c0a08;
|
|
--color-paper: #ffffff;
|
|
--color-limestone: #f4f2f0;
|
|
--color-charcoal: #1a1919;
|
|
--color-slate: #4d505d;
|
|
--color-fog: #999ba3;
|
|
--color-bone: #d2cecb;
|
|
|
|
/* Typography — Font Families */
|
|
--font-lausanne: 'Lausanne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
|
|
/* Typography — Scale */
|
|
--text-micro: 10px;
|
|
--leading-micro: 1.2;
|
|
--text-caption: 13px;
|
|
--leading-caption: 1.46;
|
|
--text-body: 16px;
|
|
--leading-body: 1.5;
|
|
--text-subheading: 18px;
|
|
--leading-subheading: 1.43;
|
|
--text-heading-sm: 20px;
|
|
--leading-heading-sm: 1.38;
|
|
--text-heading: 24px;
|
|
--leading-heading: 1.33;
|
|
--text-heading-lg: 28px;
|
|
--leading-heading-lg: 1.3;
|
|
--text-display-sm: 40px;
|
|
--leading-display-sm: 1.2;
|
|
--text-display: 48px;
|
|
--leading-display: 1.14;
|
|
--text-display-lg: 64px;
|
|
--leading-display-lg: 1.05;
|
|
|
|
/* Typography — Weights */
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
|
|
/* Spacing */
|
|
--spacing-unit: 4px;
|
|
--spacing-4: 4px;
|
|
--spacing-8: 8px;
|
|
--spacing-12: 12px;
|
|
--spacing-16: 16px;
|
|
--spacing-20: 20px;
|
|
--spacing-24: 24px;
|
|
--spacing-28: 28px;
|
|
--spacing-32: 32px;
|
|
--spacing-40: 40px;
|
|
--spacing-48: 48px;
|
|
--spacing-52: 52px;
|
|
--spacing-64: 64px;
|
|
--spacing-76: 76px;
|
|
--spacing-128: 128px;
|
|
--spacing-160: 160px;
|
|
--spacing-176: 176px;
|
|
|
|
/* Layout */
|
|
--page-max-width: 1200px;
|
|
--section-gap: 80px;
|
|
--card-padding: 24px;
|
|
--element-gap: 8px;
|
|
|
|
/* Border Radius */
|
|
--radius-md: 4px;
|
|
--radius-lg: 7.8px;
|
|
--radius-xl: 12px;
|
|
|
|
/* Named Radii */
|
|
--radius-nav: 4px;
|
|
--radius-tags: 9999px;
|
|
--radius-cards: 12px;
|
|
--radius-images: 12px;
|
|
--radius-inputs: 4px;
|
|
--radius-buttons: 4px;
|
|
|
|
/* Shadows */
|
|
--shadow-subtle: rgba(255, 255, 255, 0.6) 0px 0px 2px 0px inset;
|
|
|
|
/* Surfaces */
|
|
--surface-paper-canvas: #ffffff;
|
|
--surface-limestone-card: #f4f2f0;
|
|
--surface-charcoal-overlay: #1a1919;
|
|
--surface-obsidian-ground: #0c0a08;
|
|
} |