/* ============================================================ VACATION-AI — DESIGN SYSTEM ============================================================ Single source of truth for all design tokens. MANDATORY: Use these variables in ALL new development. Do NOT hardcode colors, fonts, shadows, or radii. ============================================================ */ :root { /* ---------------------------------------------------------- 1. COLORS — BRAND ---------------------------------------------------------- */ --ds-orange: #FFAA4C; --ds-orange-hover: #e6993a; --ds-orange-light: #FFB76D; --ds-orange-dark: #FF9F43; --ds-orange-btn: #FFA53E; --ds-blue: #5bb2ff; --ds-blue-header: #61A1F1; --ds-blue-header-dark: #548EDA; --ds-blue-sky: #7dd3fc; --ds-blue-info-banner: #2196f3; --ds-red: #FF2E5B; --ds-red-dark: #E62952; --ds-green: #3DCF86; --ds-green-dark: #37B576; --ds-green-accent: #059669; /* ---------------------------------------------------------- 2. COLORS — STATUS ---------------------------------------------------------- */ --ds-success: #28A745; --ds-danger: #DC3545; --ds-danger-badge: #EF4444; --ds-warning: #e2a03f; --ds-info: #2196f3; /* ---------------------------------------------------------- 3. COLORS — NEUTRALS & TEXT ---------------------------------------------------------- */ --ds-white: #FFFFFF; --ds-black: #000000; --ds-text-heading: #374151; --ds-text-heading-alt: #343A40; --ds-text-body: #4B5563; --ds-text-muted: #6B7280; --ds-text-muted-alt: #6C757D; --ds-text-dark: #1a1a1a; --ds-text-darkest: #212529; --ds-bg-light: #F8F9FA; --ds-bg-light-alt: #F8F8F8; --ds-bg-page: #f1f2f3; --ds-bg-filter: #dbeafe; --ds-bg-filter-head: #e0f7fa; --ds-bg-invoice: #E0F2F7; --ds-bg-info-banner: #e7f2fa; --ds-border: #D1D5DB; --ds-border-light: #E5E7EB; --ds-border-input: #E0E0E0; --ds-border-muted: #ADB5BD; --ds-gray-100: #f8f9fa; --ds-gray-200: #e5e7eb; --ds-gray-300: #d1d5db; --ds-gray-400: #9ca3af; --ds-gray-500: #6b7280; --ds-gray-600: #4b5563; --ds-gray-700: #374151; --ds-gray-800: #1f2937; --ds-gray-900: #111827; /* ---------------------------------------------------------- 4. COLORS — OVERLAYS & TRANSPARENCY ---------------------------------------------------------- */ --ds-overlay-hero: rgba(40, 50, 70, 0.35); --ds-overlay-dark: rgba(0, 0, 0, 0.55); --ds-overlay-medium: rgba(0, 0, 0, 0.35); --ds-overlay-light: rgba(0, 0, 0, 0.15); --ds-glass-bg: rgba(200, 210, 225, 0.45); --ds-glass-border: rgba(255, 255, 255, 0.35); /* ---------------------------------------------------------- 5. TYPOGRAPHY — FONT FAMILIES ---------------------------------------------------------- */ --ds-font-heading: 'Poppins', sans-serif; --ds-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ds-font-body-alt: 'Arimo', sans-serif; --ds-font-admin: 'Nunito', sans-serif; /* ---------------------------------------------------------- 6. TYPOGRAPHY — FONT SIZES ---------------------------------------------------------- */ --ds-text-2xs: 0.625rem; /* 10px */ --ds-text-xs: 0.75rem; /* 12px */ --ds-text-sm: 0.8125rem; /* 13px */ --ds-text-base: 0.875rem; /* 14px */ --ds-text-md: 0.9375rem; /* 15px */ --ds-text-lg: 1rem; /* 16px */ --ds-text-xl: 1.125rem; /* 18px */ --ds-text-2xl: 1.25rem; /* 20px */ --ds-text-3xl: 1.5rem; /* 24px */ --ds-text-4xl: 1.75rem; /* 28px */ --ds-text-5xl: 2rem; /* 32px */ --ds-text-6xl: 2.5rem; /* 40px */ --ds-text-7xl: 3rem; /* 48px */ /* ---------------------------------------------------------- 7. TYPOGRAPHY — FONT WEIGHTS ---------------------------------------------------------- */ --ds-font-regular: 400; --ds-font-medium: 500; --ds-font-semibold: 600; --ds-font-bold: 700; --ds-font-extrabold: 800; /* ---------------------------------------------------------- 8. TYPOGRAPHY — LINE HEIGHTS ---------------------------------------------------------- */ --ds-leading-tight: 1.1; --ds-leading-snug: 1.25; --ds-leading-normal: 1.5; --ds-leading-relaxed: 1.6; --ds-leading-loose: 1.65; /* ---------------------------------------------------------- 9. TYPOGRAPHY — LETTER SPACING ---------------------------------------------------------- */ --ds-tracking-tight: -0.02em; --ds-tracking-normal: 0; --ds-tracking-wide: 0.02em; --ds-tracking-wider: 0.05em; --ds-tracking-widest: 0.18em; /* ---------------------------------------------------------- 10. SPACING SCALE ---------------------------------------------------------- */ --ds-space-1: 0.25rem; /* 4px */ --ds-space-2: 0.5rem; /* 8px */ --ds-space-3: 0.75rem; /* 12px */ --ds-space-4: 1rem; /* 16px */ --ds-space-5: 1.25rem; /* 20px */ --ds-space-6: 1.5rem; /* 24px */ --ds-space-8: 2rem; /* 32px */ --ds-space-10: 2.5rem; /* 40px */ --ds-space-12: 3rem; /* 48px */ --ds-space-16: 4rem; /* 64px */ --ds-space-20: 5rem; /* 80px */ --ds-space-24: 6rem; /* 96px */ /* ---------------------------------------------------------- 11. BORDER RADIUS ---------------------------------------------------------- */ --ds-radius-xs: 2px; --ds-radius-sm: 6px; --ds-radius-md: 10px; --ds-radius-lg: 16px; --ds-radius-xl: 20px; --ds-radius-2xl: 24px; --ds-radius-pill: 999px; --ds-radius-full: 50%; /* ---------------------------------------------------------- 12. BOX SHADOWS ---------------------------------------------------------- */ --ds-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06); --ds-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08); --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --ds-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 12px rgba(0, 0, 0, 0.06); --ds-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08); --ds-shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.14); --ds-shadow-drawer: 0 10px 30px rgba(0, 0, 0, 0.08); /* ---------------------------------------------------------- 13. TRANSITIONS ---------------------------------------------------------- */ --ds-transition-fast: 0.15s ease; --ds-transition-default: 0.2s ease; --ds-transition-smooth: 0.25s ease; /* ---------------------------------------------------------- 14. Z-INDEX SCALE ---------------------------------------------------------- */ --ds-z-dropdown: 100; --ds-z-sticky: 200; --ds-z-fixed: 300; --ds-z-overlay: 400; --ds-z-modal: 500; --ds-z-toast: 600; --ds-z-ai-bot: 9999; /* ---------------------------------------------------------- 15. COMPONENT TOKENS (semantic aliases) ---------------------------------------------------------- */ /* Buttons */ --ds-btn-primary-bg: var(--ds-orange); --ds-btn-primary-hover: var(--ds-orange-hover); --ds-btn-primary-text: var(--ds-white); /* Cards */ --ds-card-bg: var(--ds-white); --ds-card-radius: var(--ds-radius-2xl); --ds-card-shadow: var(--ds-shadow-md); --ds-card-shadow-hover: var(--ds-shadow-card-hover); /* Inputs */ --ds-input-border: var(--ds-border-input); --ds-input-radius: var(--ds-radius-md); --ds-input-bg: var(--ds-white); --ds-input-focus-ring: rgba(91, 178, 255, 0.2); /* Header / Footer */ --ds-header-bg: var(--ds-white); --ds-footer-bg: var(--ds-bg-light-alt); /* Hero */ --ds-hero-blue: var(--ds-blue); --ds-hero-orange: var(--ds-orange); --ds-hero-overlay: var(--ds-overlay-hero); /* Badges */ --ds-badge-bg: var(--ds-orange); --ds-badge-text: var(--ds-white); --ds-badge-danger-bg: var(--ds-danger-badge); /* Rating */ --ds-rating-star: #ffc107; --ds-rating-bg: #e3f2fd; } /* ============================================================ BREAKPOINTS REFERENCE (CSS custom properties can't be used in @media queries — use these values directly) ============================================================ --ds-breakpoint-sm: 575.98px (mobile) --ds-breakpoint-md: 767.98px (tablet) --ds-breakpoint-lg: 991.98px (desktop) --ds-breakpoint-xl: 1199.98px (wide) ============================================================ */ /* ============================================================ GLASSMORPHISM UTILITY ============================================================ */ .ds-glass { background: var(--ds-glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--ds-glass-border); }