/* ================================================================================ STAR SCRAP PARTS — DESIGN TOKENS & CSS VARIABLES (variables.css) WHAT THIS DOES: Defines the global color palette, typography font families, spacing units, border radiuses, shadows, and transition timings used throughout the website. WHY IT EXISTS: Centralizing these design variables means you can change the entire look, brand color, typography, or spacing of the website by editing just ONE file, without having to search and replace styles across thousands of lines of CSS. WHERE TO CHANGE THE DESIGN: - Change Primary Accent: Edit `--color-accent` below. - Change Background Tone: Edit `--color-bg-main` or `--color-dark-bg`. - Change Font Family: Edit `--font-sans` or `--font-tech`. - Change Card Borders: Edit `--color-border-subtle`. THEME SELECTED: Titanium Slate & Performance Blue: - Dark Slate (#0F172A) - Precision Racing Blue (#2563EB) - Crisp Light Industrial Gray (#F8FAFC) - Clean White (#FFFFFF) ================================================================================ */ :root { /* ========================================================================== 1. COLOR SYSTEM — BRAND ACCENTS & CALLS TO ACTION Change these variables if you want to modify button colors, links, and visual highlights across the entire site. ========================================================================== */ /* Main Performance Blue accent used for primary buttons, active tabs, and focus outlines */ --color-accent: #2563EB; /* Darker blue shade used when hovering over primary buttons */ --color-accent-hover: #1D4ED8; /* Deep active blue shade used when pressing buttons */ --color-accent-active: #1E40AF; /* Soft translucent blue tint used for pill tags and subtle active badges */ --color-accent-soft: rgba(37, 99, 235, 0.08); /* Subtle border color for highlighted cards and badges */ --color-accent-border: rgba(37, 99, 235, 0.25); /* High-contrast text color on top of blue accent backgrounds */ --color-accent-contrast: #FFFFFF; /* ========================================================================== 2. COLOR SYSTEM — DARK AUTOMOTIVE TONES (SLATE & GRAPHITE) Used for the header, hero backdrop, dark scrap cars section, and footer. ========================================================================== */ /* Deepest slate black for page headers, dark sections, and footers */ --color-dark-bg: #0B1120; /* Primary slate background for dark card containers */ --color-dark-surface: #0F172A; /* Elevated slate card surface with subtle distinction */ --color-dark-card: #1E293B; /* Muted hairline border between dark slate components */ --color-dark-border: #334155; /* Subtle divider line inside dark sections */ --color-dark-divider: #1E293B; /* Bright text for dark slate backgrounds */ --color-dark-text-main: #F8FAFC; /* Muted silver-slate text for secondary information in dark sections */ --color-dark-text-muted: #94A3B8; /* ========================================================================== 3. COLOR SYSTEM — LIGHT INDUSTRIAL SURFACES Used for the main light sections (About, Parts, Godowns, Process, Form). ========================================================================== */ /* Crisp light industrial canvas background */ --color-bg-main: #F8FAFC; /* Secondary surface background for alternating section blocks */ --color-bg-secondary: #F1F5F9; /* Pure crisp white for foreground cards, inputs, and content panels */ --color-bg-card: #FFFFFF; /* Card hover background */ --color-bg-card-hover: #F8FAFC; /* ========================================================================== 4. COLOR SYSTEM — LIGHT SECTION TYPOGRAPHY & HAIRLINE BORDERS ========================================================================== */ /* Deepest charcoal slate for primary headlines and high-contrast body text */ --color-text-main: #0F172A; /* Balanced slate gray for paragraphs, descriptions, and labels */ --color-text-body: #334155; /* Muted slate for metadata, captions, and secondary timestamps */ --color-text-muted: #64748B; /* Subtle hairline border for cards, table dividers, and input borders */ --color-border-subtle: #E2E8F0; /* Stronger border used when hovering over light cards */ --color-border-hover: #CBD5E1; /* High contrast border on form field focus */ --color-border-focus: #2563EB; /* ========================================================================== 5. STATUS & VALIDATION COLORS ========================================================================== */ /* Green for successful form submissions and availability check badges */ --color-success: #16A34A; --color-success-bg: #DCFCE7; --color-success-border: #86EFAC; /* Red for form input errors and required field alerts */ --color-error: #DC2626; --color-error-bg: #FEE2E2; --color-error-border: #FCA5A5; /* Amber for inventory status notifications */ --color-warning: #D97706; /* ========================================================================== 6. TYPOGRAPHY SYSTEM Font pairings: - Inter: Modern, highly legible neo-grotesque sans for body text. - Syne: Premium geometric display font for headings (Tisser style). ========================================================================== */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-tech: 'Syne', 'Inter', sans-serif; /* Font Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Line Heights */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.6; --lh-loose: 1.75; /* ========================================================================== FLUID TYPOGRAPHY & SPACING (Responsive Model) ========================================================================== */ --fluid-h1: clamp(2.5rem, 5vw + 1rem, 4.5rem); --fluid-h2: clamp(2rem, 4vw + 1rem, 3.5rem); --fluid-h3: clamp(1.5rem, 3vw + 0.5rem, 2.25rem); --fluid-body: clamp(0.95rem, 0.3vw + 0.9rem, 1.125rem); --fluid-section-pad-y: clamp(3rem, 8vw, 8rem); --fluid-container-pad-x: clamp(1rem, 5vw, 2.5rem); /* ========================================================================== 7. SPACING SCALE & STRUCTURAL GRID ========================================================================== */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4.5rem; /* 72px */ --space-4xl: 6rem; /* 96px */ /* Maximum layout widths */ --container-max: 1240px; --container-wide: 1360px; --container-narrow: 860px; --container-pad: 1.5rem; /* ========================================================================== 8. BORDERS & SHADOWS (RESTRAINED INDUSTRIAL STYLE) No excessive blurry shadows; clean, structured, engineered edges. ========================================================================== */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 9999px; /* Controlled industrial shadows */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04); --shadow-dark: 0 12px 24px rgba(0, 0, 0, 0.35); /* ========================================================================== 9. TRANSITIONS & TIMING Subtle, snappy transitions designed for responsiveness. ========================================================================== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1); /* Navbar height token for offset calculations */ --header-height: 76px; }