152 lines
4.2 KiB
CSS
152 lines
4.2 KiB
CSS
|
/* Landvex Design Tokens v1.0 */
|
||
|
|
/* Standardized spacing, colors, typography, and border-radius */
|
||
|
|
|
||
|
|
:root {
|
||
|
|
/* === COLORS === */
|
||
|
|
/* Primary Brand */
|
||
|
|
--color-primary: #0066FF;
|
||
|
|
--color-primary-dark: #0052CC;
|
||
|
|
--color-primary-light: #3385FF;
|
||
|
|
|
||
|
|
/* Secondary (quiXzoom accent) */
|
||
|
|
--color-accent: #FF3366;
|
||
|
|
--color-accent-dark: #E62E5C;
|
||
|
|
|
||
|
|
/* Neutral */
|
||
|
|
--color-black: #0A0A0A;
|
||
|
|
--color-dark: #1A1A1A;
|
||
|
|
--color-gray-900: #1D1D1F;
|
||
|
|
--color-gray-800: #2D2D2F;
|
||
|
|
--color-gray-700: #4A4A4A;
|
||
|
|
--color-gray-600: #6E6E73;
|
||
|
|
--color-gray-500: #8E8E93;
|
||
|
|
--color-gray-400: #A1A1A6;
|
||
|
|
--color-gray-300: #C7C7CC;
|
||
|
|
--color-gray-200: #D1D1D6;
|
||
|
|
--color-gray-100: #E5E5EA;
|
||
|
|
--color-gray-50: #F2F2F7;
|
||
|
|
--color-white: #FFFFFF;
|
||
|
|
|
||
|
|
/* Semantic */
|
||
|
|
--color-success: #22C55E;
|
||
|
|
--color-warning: #F59E0B;
|
||
|
|
--color-error: #EF4444;
|
||
|
|
--color-info: #3B82F6;
|
||
|
|
|
||
|
|
/* === SPACING === */
|
||
|
|
/* Base unit: 4px */
|
||
|
|
--space-0: 0;
|
||
|
|
--space-1: 4px;
|
||
|
|
--space-2: 8px;
|
||
|
|
--space-3: 12px;
|
||
|
|
--space-4: 16px;
|
||
|
|
--space-5: 20px;
|
||
|
|
--space-6: 24px;
|
||
|
|
--space-8: 32px;
|
||
|
|
--space-10: 40px;
|
||
|
|
--space-12: 48px;
|
||
|
|
--space-16: 64px;
|
||
|
|
--space-20: 80px;
|
||
|
|
--space-24: 96px;
|
||
|
|
|
||
|
|
/* === BORDER RADIUS === */
|
||
|
|
--radius-none: 0;
|
||
|
|
--radius-sm: 6px; /* Buttons, tags, small elements */
|
||
|
|
--radius-md: 10px; /* Cards, inputs, modals */
|
||
|
|
--radius-lg: 16px; /* Large cards, hero sections */
|
||
|
|
--radius-xl: 24px; /* Feature cards, containers */
|
||
|
|
--radius-full: 9999px; /* Pills, avatars, badges */
|
||
|
|
|
||
|
|
/* === TYPOGRAPHY === */
|
||
|
|
/* Font families */
|
||
|
|
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Helvetica Neue', sans-serif;
|
||
|
|
--font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
||
|
|
|
||
|
|
/* Font sizes (rem-based) */
|
||
|
|
--text-xs: 0.75rem; /* 12px */
|
||
|
|
--text-sm: 0.875rem; /* 14px */
|
||
|
|
--text-base: 1rem; /* 16px */
|
||
|
|
--text-lg: 1.125rem; /* 18px */
|
||
|
|
--text-xl: 1.25rem; /* 20px */
|
||
|
|
--text-2xl: 1.5rem; /* 24px */
|
||
|
|
--text-3xl: 1.875rem; /* 30px */
|
||
|
|
--text-4xl: 2.25rem; /* 36px */
|
||
|
|
--text-5xl: 3rem; /* 48px */
|
||
|
|
|
||
|
|
/* Font weights */
|
||
|
|
--font-normal: 400;
|
||
|
|
--font-medium: 500;
|
||
|
|
--font-semibold: 600;
|
||
|
|
--font-bold: 700;
|
||
|
|
--font-extrabold: 800;
|
||
|
|
|
||
|
|
/* Line heights */
|
||
|
|
--leading-none: 1;
|
||
|
|
--leading-tight: 1.25;
|
||
|
|
--leading-snug: 1.375;
|
||
|
|
--leading-normal: 1.5;
|
||
|
|
--leading-relaxed: 1.625;
|
||
|
|
--leading-loose: 2;
|
||
|
|
|
||
|
|
/* === SHADOWS === */
|
||
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
|
|
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
||
|
|
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
|
||
|
|
--shadow-glow: 0 0 20px rgba(0, 102, 255, 0.3);
|
||
|
|
|
||
|
|
/* === TRANSITIONS === */
|
||
|
|
--transition-fast: 150ms ease;
|
||
|
|
--transition-base: 200ms ease;
|
||
|
|
--transition-slow: 300ms ease;
|
||
|
|
|
||
|
|
/* === Z-INDEX === */
|
||
|
|
--z-dropdown: 100;
|
||
|
|
--z-sticky: 200;
|
||
|
|
--z-modal: 300;
|
||
|
|
--z-popover: 400;
|
||
|
|
--z-tooltip: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === UTILITY CLASSES === */
|
||
|
|
/* Use these instead of inline styles */
|
||
|
|
|
||
|
|
/* Border radius utilities */
|
||
|
|
.rounded-none { border-radius: var(--radius-none); }
|
||
|
|
.rounded-sm { border-radius: var(--radius-sm); }
|
||
|
|
.rounded-md { border-radius: var(--radius-md); }
|
||
|
|
.rounded-lg { border-radius: var(--radius-lg); }
|
||
|
|
.rounded-xl { border-radius: var(--radius-xl); }
|
||
|
|
.rounded-full { border-radius: var(--radius-full); }
|
||
|
|
|
||
|
|
/* Spacing utilities (examples) */
|
||
|
|
.p-1 { padding: var(--space-1); }
|
||
|
|
.p-2 { padding: var(--space-2); }
|
||
|
|
.p-4 { padding: var(--space-4); }
|
||
|
|
.p-6 { padding: var(--space-6); }
|
||
|
|
.p-8 { padding: var(--space-8); }
|
||
|
|
|
||
|
|
.m-1 { margin: var(--space-1); }
|
||
|
|
.m-2 { margin: var(--space-2); }
|
||
|
|
.m-4 { margin: var(--space-4); }
|
||
|
|
|
||
|
|
/* Text utilities */
|
||
|
|
.text-xs { font-size: var(--text-xs); }
|
||
|
|
.text-sm { font-size: var(--text-sm); }
|
||
|
|
.text-base { font-size: var(--text-base); }
|
||
|
|
.text-lg { font-size: var(--text-lg); }
|
||
|
|
.text-xl { font-size: var(--text-xl); }
|
||
|
|
|
||
|
|
.font-medium { font-weight: var(--font-medium); }
|
||
|
|
.font-semibold { font-weight: var(--font-semibold); }
|
||
|
|
.font-bold { font-weight: var(--font-bold); }
|
||
|
|
|
||
|
|
/* Color utilities */
|
||
|
|
.text-primary { color: var(--color-primary); }
|
||
|
|
.text-secondary { color: var(--color-gray-600); }
|
||
|
|
.text-muted { color: var(--color-gray-500); }
|
||
|
|
|
||
|
|
.bg-primary { background-color: var(--color-primary); }
|
||
|
|
.bg-dark { background-color: var(--color-dark); }
|
||
|
|
.bg-light { background-color: var(--color-gray-50); }
|