/* ========================================================================== DESIGN TOKENS MJAviator Design System - CSS Custom Properties ========================================================================== */ :root { /* ==================== COLORS - BRAND ==================== */ /* Primary Brand - Navy */ --color-primary-900: #0D0D3D; --color-primary-800: #131350; --color-primary-700: #1A1A68; /* Current header color */ --color-primary-600: #242480; --color-primary-500: #2E2E99; --color-primary-400: #5050B3; --color-primary-300: #7272CC; --color-primary-200: #A5A5E0; --color-primary-100: #D2D2F0; --color-primary-50: #E9E9F8; /* Secondary Brand - Gold */ --color-secondary-900: #5C4F20; --color-secondary-800: #7A6A2B; --color-secondary-700: #998436; --color-secondary-600: #B39F42; --color-secondary-500: #C8B568; /* Current accent color */ --color-secondary-400: #D4C588; --color-secondary-300: #E0D5A8; --color-secondary-200: #ECE5C8; --color-secondary-100: #F5F0E0; --color-secondary-50: #FAF8F0; /* ==================== COLORS - SEMANTIC ==================== */ /* Success */ --color-success-600: #15803D; --color-success-500: #22C55E; --color-success-100: #DCFCE7; /* Warning */ --color-warning-600: #CA8A04; --color-warning-500: #EAB308; --color-warning-100: #FEF9C3; /* Error/Danger */ --color-error-600: #DC2626; --color-error-500: #EF4444; --color-error-100: #FEE2E2; /* Info */ --color-info-600: #0284C7; --color-info-500: #0EA5E9; --color-info-100: #E0F2FE; /* ==================== COLORS - NEUTRAL ==================== */ --color-neutral-900: #111827; /* Headings, primary text */ --color-neutral-800: #1F2937; --color-neutral-700: #374151; /* Body text */ --color-neutral-600: #4B5563; --color-neutral-500: #6B7280; /* Secondary text */ --color-neutral-400: #9CA3AF; /* Placeholder text */ --color-neutral-300: #D1D5DB; /* Borders */ --color-neutral-200: #E5E7EB; /* Dividers */ --color-neutral-100: #F3F4F6; /* Subtle backgrounds */ --color-neutral-50: #F9FAFB; /* Page background */ --color-neutral-0: #FFFFFF; /* Cards, inputs */ /* ==================== BACKGROUNDS ==================== */ --bg-page: #F0F5F7; /* Slightly updated from #e8f0f3 */ --bg-surface: #FFFFFF; /* Cards, modals */ --bg-surface-hover: #F9FAFB; /* Hover states */ --bg-surface-active: #F3F4F6; /* Active/pressed states */ --bg-overlay: rgba(0, 0, 0, 0.5); /* Modal backdrops */ /* ==================== TYPOGRAPHY ==================== */ /* Font Families */ --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Type Scale */ --text-base: 1rem; /* 16px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-md: 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; /* Line Heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* ==================== SPACING ==================== */ /* Spacing Scale */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* Component Spacing */ --padding-xs: var(--space-2); /* Tight elements */ --padding-sm: var(--space-3); /* Small buttons, inputs */ --padding-md: var(--space-4); /* Standard buttons, cards */ --padding-lg: var(--space-6); /* Large cards, modals */ --padding-xl: var(--space-8); /* Sections */ /* Gaps between elements */ --gap-xs: var(--space-1); --gap-sm: var(--space-2); --gap-md: var(--space-4); --gap-lg: var(--space-6); --gap-xl: var(--space-8); /* ==================== ELEVATION (SHADOWS) ==================== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Colored shadows for emphasis */ --shadow-primary: 0 4px 14px rgba(26, 26, 104, 0.25); --shadow-success: 0 4px 14px rgba(34, 197, 94, 0.25); --shadow-error: 0 4px 14px rgba(239, 68, 68, 0.25); /* ==================== BORDERS ==================== */ /* Border widths */ --border-width-thin: 1px; --border-width-medium: 2px; --border-width-thick: 4px; /* Border radius */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px - inputs, small buttons */ --radius-md: 0.5rem; /* 8px - cards, standard buttons */ --radius-lg: 0.75rem; /* 12px - modals, large cards */ --radius-xl: 1rem; /* 16px - large UI elements */ --radius-2xl: 1.5rem; /* 24px - pills, tags */ --radius-full: 9999px; /* Circles, full-round buttons */ /* Border colors */ --border-default: var(--color-neutral-300); --border-hover: var(--color-neutral-400); --border-focus: var(--color-primary-500); --border-error: var(--color-error-500); --border-success: var(--color-success-500); /* ==================== MOTION & ANIMATION ==================== */ /* Durations */ --duration-instant: 75ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; /* Easing functions */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Common transitions */ --transition-colors: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); --transition-shadow: box-shadow var(--duration-normal) var(--ease-out); --transition-transform: transform var(--duration-normal) var(--ease-out); --transition-all: all var(--duration-normal) var(--ease-out); /* ==================== BREAKPOINTS ==================== */ /* Note: CSS custom properties cannot be used in @media queries */ /* Use these literal values in your media queries */ --breakpoint-sm: 576px; /* Small phones landscape */ --breakpoint-md: 768px; /* Tablets */ --breakpoint-lg: 992px; /* Small laptops */ --breakpoint-xl: 1200px; /* Desktops */ --breakpoint-2xl: 1400px; /* Large desktops */ /* ==================== Z-INDEX SCALE ==================== */ --z-dropdown: 100; /* Dropdowns, tooltips */ --z-sticky: 200; /* Sticky headers, bottom nav */ --z-fixed: 300; /* Fixed banners, support button */ --z-modal-bg: 400; /* Modal backdrops */ --z-modal: 500; /* Modal content */ --z-popover: 600; /* Popovers over modals */ --z-toast: 700; /* Toast notifications */ --z-max: 9999; /* Emergency overrides only */ } /* ==================== REDUCED MOTION ==================== */ /* Respect user's motion preferences */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } }