/* ============================================================================= Wendt Partners - Enterprise ATS & CMS Platform CSS Design System Variables ============================================================================= Purpose: All CSS Custom Properties for colors, typography, spacing, shadows, borders, transitions, and z-index layers. Rules: - NO clamp() as primary definitions - Fixed rem-based values - Media queries in responsive.css override these values - Brand colors used sparingly; neutrals dominate Architecture: Pure CSS | No Preprocessors | Industry Standard Palette ============================================================================= */ :root { /* ========================================================================= COLOR PALETTE ========================================================================= */ /* Primary Brand Color - Professional Deep Blue (Industry Standard) */ --color-primary: #2563EB; --color-primary-hover: #1D4ED8; --color-primary-active: #1E40AF; --color-primary-light: #3B82F6; --color-primary-lighter: #93C5FD; --color-primary-lightest: #DBEAFE; --color-primary-glow: rgba(37, 99, 235, 0.35); /* Secondary / Accent - Used sparingly for brand alignment */ --color-secondary: #0F172A; --color-secondary-light: #334155; /* Neutral Foundation Palette */ --color-white: #FFFFFF; --color-neutral-50: #F8FAFC; /* Lightest background */ --color-neutral-100: #F1F5F9; /* Off-white / card backgrounds */ --color-neutral-200: #E2E8F0; /* Borders, dividers */ --color-neutral-300: #CBD5E1; /* Disabled states */ --color-neutral-400: #94A3B8; /* Placeholder text */ --color-neutral-500: #64748B; /* Secondary text */ --color-neutral-600: #475569; /* Body text secondary */ --color-neutral-700: #334155; /* Body text primary */ --color-neutral-800: #1E293B; /* Headings */ --color-neutral-900: #0F172A; /* Off-black / darkest */ --color-black: #000000; /* Semantic Colors */ --color-success: #059669; --color-success-light: #D1FAE5; --color-success-dark: #047857; --color-warning: #D97706; --color-warning-light: #FEF3C7; --color-warning-dark: #B45309; --color-error: #DC2626; --color-error-light: #FEE2E2; --color-error-dark: #B91C1C; --color-info: #0891B2; --color-info-light: #CFFAFE; --color-info-dark: #0E7490; /* Pipeline Stage Colors */ --color-stage-applied: #3B82F6; --color-stage-screening: #8B5CF6; --color-stage-interview: #F59E0B; --color-stage-assessment: #06B6D4; --color-stage-offer: #10B981; --color-stage-hired: #059669; --color-stage-rejected: #EF4444; /* Background Colors */ --color-bg-body: var(--color-neutral-50); --color-bg-card: var(--color-white); --color-bg-sidebar: var(--color-neutral-900); --color-bg-overlay: rgba(15, 23, 42, 0.6); /* Text Colors */ --color-text-primary: var(--color-neutral-800); --color-text-secondary: var(--color-neutral-600); --color-text-muted: var(--color-neutral-500); --color-text-inverse: var(--color-white); --color-text-link: var(--color-primary); /* Border Colors */ --color-border: var(--color-neutral-200); --color-border-light: var(--color-neutral-100); --color-border-focus: var(--color-primary); /* ========================================================================= TYPOGRAPHY - Font Sizes (Fixed rem, NO clamp()) ========================================================================= */ --font-size-xs: 0.75rem; /* 12px — badges, micro labels */ --font-size-sm: 0.875rem; /* 14px — nav, secondary text */ --font-size-base: 1rem; /* 16px — body (optimal reading) */ --font-size-lg: 1.125rem; /* 18px — lead paragraphs, h5 */ --font-size-xl: 1.25rem; /* 20px — card titles, h4 */ --font-size-2xl: 1.5rem; /* 24px — h3 subsections */ --font-size-3xl: 1.875rem; /* 30px — large subsections */ --font-size-4xl: 2.25rem; /* 36px — section h2 */ --font-size-5xl: 3rem; /* 48px — hero h1 */ /* ========================================================================= TYPOGRAPHY - Line Heights ========================================================================= */ --line-height-tight: 1.15; /* display/hero headings */ --line-height-snug: 1.3; /* section & card headings */ --line-height-normal: 1.6; /* body copy */ --line-height-relaxed: 1.75; /* long-form reading (blog) */ /* ========================================================================= TYPOGRAPHY - Letter Spacing (Tracking) ========================================================================= */ --tracking-tight: -0.02em; /* large headings */ --tracking-normal: 0; --tracking-wide: 0.02em; /* small-caps labels */ --tracking-wider: 0.08em; /* eyebrows / uppercase tags */ /* ========================================================================= TYPOGRAPHY - Font Family ========================================================================= */ --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Courier New', monospace; /* Font Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* ========================================================================= SPACING (Fixed rem values) ========================================================================= */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ --spacing-3xl: 4rem; /* 64px */ --spacing-4xl: 6rem; /* 96px */ /* ========================================================================= BORDERS & RADIUS ========================================================================= */ --radius-sm: 0.25rem; /* 4px - small elements */ --radius-md: 0.5rem; /* 8px - cards, inputs */ --radius-lg: 0.75rem; /* 12px - modals, large cards */ --radius-xl: 1rem; /* 16px - hero sections */ --radius-full: 9999px; /* pills, avatars */ --border-width: 1px; --border-width-2: 2px; /* ========================================================================= SHADOWS (Soft, realistic) ========================================================================= */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15); /* Card hover lift shadow */ --shadow-card-hover: 0 12px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.06); /* Button glow effect (primary color) */ --shadow-btn-glow: 0 0 0 3px var(--color-primary-glow), 0 4px 12px rgba(37, 99, 235, 0.25); /* Focus ring */ --shadow-focus-ring: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary); /* ========================================================================= TRANSITIONS & ANIMATIONS ========================================================================= */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Logo marquee animation */ --marquee-duration: 30s; /* ========================================================================= Z-INDEX LAYERS ========================================================================= */ --z-dropdown: 100; --z-sticky: 200; --z-sidebar: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; /* ========================================================================= LAYOUT ========================================================================= */ --container-max-width: 75rem; /* 1200px */ --container-wide-max: 90rem; /* 1440px */ --sidebar-width: 16rem; /* 256px */ --sidebar-collapsed-width: 4rem; /* 64px */ --header-height: 4rem; /* 64px */ --admin-header-height: 3.5rem; /* 56px */ /* Grid gaps */ --grid-gap: var(--spacing-lg); --grid-gap-sm: var(--spacing-md); --grid-gap-lg: var(--spacing-xl); /* ========================================================================= ACCESSIBILITY ========================================================================= */ /* Minimum touch target size (WCAG 2.5.5) */ --touch-target-min: 2.75rem; /* 44px */ /* Focus visible outline */ --focus-outline: 2px solid var(--color-primary); --focus-outline-offset: 2px; /* ========================================================================= SCROLLBAR ========================================================================= */ --scrollbar-width: 8px; --scrollbar-track: var(--color-neutral-100); --scrollbar-thumb: var(--color-neutral-300); --scrollbar-thumb-hover: var(--color-neutral-400); } /* ============================================================================= DARK MODE SUPPORT (Admin only - future-proofing) ============================================================================= */ [data-theme="dark"] { --color-bg-body: var(--color-neutral-900); --color-bg-card: var(--color-neutral-800); --color-text-primary: var(--color-neutral-100); --color-text-secondary: var(--color-neutral-300); --color-border: var(--color-neutral-700); } /* ============================================================================= REDUCED MOTION PREFERENCE (Accessibility) ============================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; --transition-spring: 0ms; --marquee-duration: 0s; } }