/* * RailScanPro Design System v2.1 - "Railroad Heritage" * * Primary: Railroad Green (Pullman/Heritage green) * Secondary: Brass (industrial accents) * * This palette evokes classic railroad liveries while * maintaining a modern, premium software feel. * * Created: December 2025 * Updated: Railroad Green variant */ :root { /* ======================================== * CORE PALETTE - Locomotive Black Series * Deep, rich blacks with cool undertones * ======================================== */ --color-locomotive-black: #0A0C0F; --color-engine-room: #12161B; --color-steel-dark: #1A1F26; --color-steel-base: #242B35; --color-weathered-steel: #374151; --color-steel-light: #4B5563; --color-steel-bright: #6B7280; /* ======================================== * PRIMARY PALETTE - Railroad Green * Inspired by Pullman, BN, and Southern Ry * ======================================== */ --color-railroad-50: #F0F7F4; --color-railroad-100: #DCF0E6; --color-railroad-200: #BBE1CE; --color-railroad-300: #8DCAAD; --color-railroad-400: #5AAE88; --color-railroad-500: #3D8B68; /* Main railroad green */ --color-railroad-600: #2E7054; --color-railroad-700: #275A45; --color-railroad-800: #234939; --color-railroad-900: #1F3D30; --color-railroad-950: #0F231B; /* Pullman Green variant (darker, more olive) */ --color-pullman-500: #2D4A3E; --color-pullman-600: #243D33; --color-pullman-700: #1B3028; /* Burlington Northern Cascade Green (brighter) */ --color-cascade-400: #4A9B6F; --color-cascade-500: #3B8459; --color-cascade-600: #2D6B46; /* ======================================== * SECONDARY PALETTE - Brass Accents * Warm metal highlights for contrast * ======================================== */ --color-brass-50: #FDF8F1; --color-brass-100: #F9EED9; --color-brass-200: #F2DCB3; --color-brass-300: #E8C99B; --color-brass-400: #DEB678; --color-brass-500: #D4A574; --color-brass-600: #C4915A; --color-brass-700: #A67844; /* Copper - tertiary accent */ --color-copper-500: #B87333; --color-copper-600: #9A5F2A; /* ======================================== * SIGNAL COLORS - Railroad Signal Palette * Authentic railroad signal colors * ======================================== */ /* Green - Clear/Proceed (slightly different from brand green) */ --color-signal-green-50: #F0FDF4; --color-signal-green-100: #DCFCE7; --color-signal-green-500: #22C55E; --color-signal-green-600: #16A34A; --color-signal-green-700: #15803D; /* Yellow - Approach/Caution */ --color-signal-yellow-50: #FEFCE8; --color-signal-yellow-100: #FEF9C3; --color-signal-yellow-500: #EAB308; --color-signal-yellow-600: #CA8A04; --color-signal-yellow-700: #A16207; /* Red - Stop/Danger */ --color-signal-red-50: #FEF2F2; --color-signal-red-100: #FEE2E2; --color-signal-red-500: #DC2626; --color-signal-red-600: #B91C1C; --color-signal-red-700: #991B1B; /* Blue - Information */ --color-signal-blue-50: #EFF6FF; --color-signal-blue-100: #DBEAFE; --color-signal-blue-500: #3B82F6; --color-signal-blue-600: #2563EB; --color-signal-blue-700: #1D4ED8; /* ======================================== * SEMANTIC MAPPINGS - Design Tokens * ======================================== */ /* Surfaces */ --surface-primary: var(--color-locomotive-black); --surface-secondary: var(--color-engine-room); --surface-tertiary: var(--color-steel-dark); --surface-quaternary: var(--color-steel-base); --surface-elevated: var(--color-steel-base); --surface-inverse: #F8FAFC; /* For Tailwind RGB format */ --color-surface-primary: 10 12 15; --color-surface-secondary: 18 22 27; --color-surface-tertiary: 26 31 38; --color-surface-inverse: 248 250 252; --color-surface-overlay: 0 0 0; /* Text Colors */ --text-emphasis: #F1F5F9; --text-primary: #E2E8F0; --text-secondary: #94A3B8; --text-muted: #64748B; --text-disabled: #475569; --text-inverse: var(--color-locomotive-black); --text-onbrand: #FFFFFF; --text-railroad: var(--color-railroad-400); --text-brass: var(--color-brass-400); /* Borders */ --border-primary: var(--color-steel-base); --border-secondary: var(--color-weathered-steel); --border-strong: var(--color-steel-light); --border-focus: var(--color-railroad-500); --border-brand: var(--color-railroad-500); --border-subtle: rgba(255, 255, 255, 0.06); /* Brand Colors - Railroad Green Primary */ --brand-primary: var(--color-railroad-500); --brand-primary-hover: var(--color-railroad-400); --brand-primary-light: var(--color-railroad-300); --brand-primary-dark: var(--color-railroad-700); /* Secondary Brand - Brass for accents */ --brand-secondary: var(--color-brass-500); --brand-secondary-hover: var(--color-brass-400); /* Primary color scale (Railroad Green) */ --color-primary-50: var(--color-railroad-50); --color-primary-100: var(--color-railroad-100); --color-primary-200: var(--color-railroad-200); --color-primary-300: var(--color-railroad-300); --color-primary-400: var(--color-railroad-400); --color-primary-500: var(--color-railroad-500); --color-primary-600: var(--color-railroad-600); --color-primary-700: var(--color-railroad-700); --color-primary-800: var(--color-railroad-800); --color-primary-900: var(--color-railroad-900); --color-primary-950: var(--color-railroad-950); /* Status Colors */ --color-status-success: 34 197 94; --color-status-warning: 234 179 8; --color-status-error: 220 38 38; --color-status-info: 59 130 246; --status-success: var(--color-signal-green-500); --status-success-hover: var(--color-signal-green-600); --status-warning: var(--color-signal-yellow-500); --status-warning-hover: var(--color-signal-yellow-600); --status-error: var(--color-signal-red-500); --status-error-hover: var(--color-signal-red-600); --status-info: var(--color-signal-blue-500); --status-info-hover: var(--color-signal-blue-600); /* Success scale */ --color-success-50: var(--color-signal-green-50); --color-success-100: var(--color-signal-green-100); --color-success-500: var(--color-signal-green-500); --color-success-600: var(--color-signal-green-600); --color-success-700: var(--color-signal-green-700); /* Warning scale */ --color-warning-50: var(--color-signal-yellow-50); --color-warning-100: var(--color-signal-yellow-100); --color-warning-500: var(--color-signal-yellow-500); --color-warning-600: var(--color-signal-yellow-600); --color-warning-700: var(--color-signal-yellow-700); /* Error scale */ --color-error-50: var(--color-signal-red-50); --color-error-100: var(--color-signal-red-100); --color-error-500: var(--color-signal-red-500); --color-error-600: var(--color-signal-red-600); --color-error-700: var(--color-signal-red-700); /* Info scale */ --color-info-50: var(--color-signal-blue-50); --color-info-100: var(--color-signal-blue-100); --color-info-500: var(--color-signal-blue-500); --color-info-600: var(--color-signal-blue-600); --color-info-700: var(--color-signal-blue-700); /* ======================================== * TYPOGRAPHY * ======================================== */ --font-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif; --font-heading: 'Oswald', 'Archivo', 'Inter', sans-serif; --font-body: 'IBM Plex Sans', 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace; /* Font Sizes */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --text-7xl: 4.5rem; /* Font Weights */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line Heights */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Letter Spacing */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ======================================== * SPACING * ======================================== */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ======================================== * SHADOWS - Cool-tinted for green * ======================================== */ --shadow-railroad-sm: 0 1px 2px rgba(61, 139, 104, 0.08); --shadow-railroad-md: 0 4px 12px rgba(61, 139, 104, 0.12); --shadow-railroad-lg: 0 8px 24px rgba(61, 139, 104, 0.18); --shadow-railroad-xl: 0 20px 40px rgba(61, 139, 104, 0.25); --shadow-brass-sm: 0 1px 2px rgba(212, 165, 116, 0.05); --shadow-brass-md: 0 4px 12px rgba(212, 165, 116, 0.1); --shadow-brass-lg: 0 8px 24px rgba(212, 165, 116, 0.15); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.1); --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25); /* Dark mode shadows */ --shadow-dark-sm: 0 1px 3px rgba(0, 0, 0, 0.24); --shadow-dark-md: 0 4px 12px rgba(0, 0, 0, 0.32); --shadow-dark-lg: 0 12px 24px rgba(0, 0, 0, 0.4); --shadow-dark-xl: 0 24px 48px rgba(0, 0, 0, 0.5); /* Glow effects */ --glow-railroad: 0 0 20px rgba(61, 139, 104, 0.35); --glow-railroad-intense: 0 0 40px rgba(61, 139, 104, 0.5); --glow-brass: 0 0 20px rgba(212, 165, 116, 0.3); /* ======================================== * BORDER RADIUS * ======================================== */ --radius-none: 0; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; --radius-button: var(--radius-md); --radius-input: var(--radius-md); --radius-card: var(--radius-xl); --radius-dialog: var(--radius-2xl); --radius-toast: var(--radius-lg); /* ======================================== * Z-INDEX * ======================================== */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; /* ======================================== * TRANSITIONS * ======================================== */ --transition-fast: 150ms; --transition-base: 250ms; --transition-slow: 400ms; --transition-slower: 600ms; --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.68, -0.55, 0.265, 1.55); /* ======================================== * FOCUS RING * ======================================== */ --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-color: var(--color-railroad-500); } /* ======================================== * UTILITY CLASSES * ======================================== */ /* Text gradient for railroad green effect */ .text-railroad-gradient { background: linear-gradient(135deg, var(--color-railroad-300), var(--color-railroad-500), var(--color-railroad-400)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Brass gradient for secondary accents */ .text-brass-gradient { background: linear-gradient(135deg, var(--color-brass-300), var(--color-brass-500), var(--color-brass-400)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Railroad green glow effect */ .glow-railroad { box-shadow: var(--glow-railroad); } .glow-railroad-intense { box-shadow: var(--glow-railroad-intense); } /* Card with railroad green accent */ .card-railroad { background: linear-gradient(145deg, var(--surface-secondary), var(--surface-tertiary)); border: 1px solid var(--border-primary); border-radius: var(--radius-card); position: relative; overflow: hidden; } .card-railroad::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-railroad-700), var(--color-railroad-500), var(--color-railroad-700)); } /* Button with railroad green styling */ .btn-railroad { background: linear-gradient(145deg, var(--color-railroad-500), var(--color-railroad-600)); color: var(--text-onbrand); font-weight: var(--font-semibold); padding: 0.75rem 1.5rem; border-radius: var(--radius-button); border: none; box-shadow: var(--shadow-railroad-md); transition: all var(--transition-base) var(--ease-out); } .btn-railroad:hover { background: linear-gradient(145deg, var(--color-railroad-400), var(--color-railroad-500)); box-shadow: var(--shadow-railroad-lg), var(--glow-railroad); transform: translateY(-2px); } /* Button with brass styling (secondary) */ .btn-brass { background: linear-gradient(145deg, var(--color-brass-500), var(--color-brass-600)); color: var(--text-inverse); font-weight: var(--font-semibold); padding: 0.75rem 1.5rem; border-radius: var(--radius-button); border: none; box-shadow: var(--shadow-brass-md); transition: all var(--transition-base) var(--ease-out); } .btn-brass:hover { background: linear-gradient(145deg, var(--color-brass-400), var(--color-brass-500)); box-shadow: var(--shadow-brass-lg), var(--glow-brass); transform: translateY(-2px); } /* Outline button with railroad green */ .btn-railroad-outline { background: transparent; border: 2px solid var(--color-railroad-500); color: var(--color-railroad-400); font-weight: var(--font-semibold); padding: 0.75rem 1.5rem; border-radius: var(--radius-button); transition: all var(--transition-base) var(--ease-out); } .btn-railroad-outline:hover { background: var(--color-railroad-500); color: var(--text-onbrand); box-shadow: var(--glow-railroad); } /* Industrial divider - railroad green */ .divider-industrial { height: 1px; background: linear-gradient(90deg, transparent, var(--border-secondary) 20%, var(--color-railroad-500) 50%, var(--border-secondary) 80%, transparent ); } /* Divider with brass accent */ .divider-brass { height: 1px; background: linear-gradient(90deg, transparent, var(--border-secondary) 20%, var(--color-brass-500) 50%, var(--border-secondary) 80%, transparent ); } /* Focus visible */ .focus-ring:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-offset) var(--surface-primary), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); } /* Hover glow effects */ .hover-glow-railroad { transition: box-shadow var(--transition-base) var(--ease-out); } .hover-glow-railroad:hover { box-shadow: 0 0 30px rgba(61, 139, 104, 0.25), 0 10px 40px rgba(0, 0, 0, 0.3); } .hover-glow-brass { transition: box-shadow var(--transition-base) var(--ease-out); } .hover-glow-brass:hover { box-shadow: 0 0 30px rgba(212, 165, 116, 0.2), 0 10px 40px rgba(0, 0, 0, 0.3); } /* Border gradient - railroad green */ .border-gradient-railroad { position: relative; background: var(--surface-secondary); border-radius: var(--radius-card); } .border-gradient-railroad::before { content: ''; position: absolute; inset: 0; padding: 2px; background: linear-gradient(135deg, var(--color-railroad-400), var(--color-railroad-600)); border-radius: inherit; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: xor; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; pointer-events: none; } /* Border gradient - brass */ .border-gradient-brass { position: relative; background: var(--surface-secondary); border-radius: var(--radius-card); } .border-gradient-brass::before { content: ''; position: absolute; inset: 0; padding: 2px; background: linear-gradient(135deg, var(--color-brass-400), var(--color-brass-600)); border-radius: inherit; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: xor; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; pointer-events: none; } /* Hero gradient with railroad green */ .bg-hero-gradient { background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(61, 139, 104, 0.12) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(212, 165, 116, 0.08) 0%, transparent 50%), linear-gradient(180deg, var(--surface-primary) 0%, var(--surface-secondary) 100%); } /* Section gradient */ .bg-section-gradient { background: linear-gradient( 180deg, var(--surface-secondary) 0%, var(--surface-primary) 50%, var(--surface-secondary) 100% ); } /* Pullman green background (darker variant) */ .bg-pullman { background: linear-gradient(135deg, var(--color-pullman-600), var(--color-pullman-700)); }