/* ============================================
   Hampton Exteriors — Brand Stylesheet
   Built from design-system/design-tokens.css
   ============================================ */

:root {
	/* Brand Colors */
	--hampton-orange:        #FF8C42;
	--hampton-orange-dark:   #ff6b1a;
	--hampton-orange-light:  #ff9d5c;
	--hampton-orange-glow:   rgba(255, 140, 66, 0.5);

	/* Backgrounds */
	--bg-black:              #000000;
	--bg-card-start:         rgba(20, 20, 20, 0.98);
	--bg-card-end:           rgba(30, 30, 30, 0.95);

	/* Text */
	--text-white:            #ffffff;
	--text-light:            #cccccc;
	--text-dark:             #1a1a1a;

	/* Typography */
	--font-family:           'Roboto', sans-serif;

	/* Transitions */
	--transition-base:       all 0.3s ease;

	/* === Light Theme (Dashboard, Login) === */
	--bg-page:               #f5f6fa;
	--bg-card:               #ffffff;
	--bg-card-hover:         #fafafa;
	--bg-section:            #f0f1f5;

	--text-primary:          #1a1a2e;
	--text-secondary:        #6c757d;
	--text-heading:          #2d2d2d;
	--text-muted:            #adb5bd;

	--border-light:          #e0e0e0;
	--border-card:           rgba(0, 0, 0, 0.06);

	--shadow-card-light:     0 2px 8px rgba(0, 0, 0, 0.08);
	--shadow-card-hover:     0 4px 16px rgba(0, 0, 0, 0.12);
	--shadow-nav:            0 2px 4px rgba(0, 0, 0, 0.08);

	--nav-bg:                #ffffff;
	--nav-height:            64px;

	--success-green:         #28a745;
	--success-bg:            #d4edda;
	--warning-yellow:        #ffc107;
	--warning-bg:            #fff3cd;
	--danger-red:            #dc3545;
	--danger-bg:             #f8d7da;
	--info-blue:             #17a2b8;
	--info-bg:               #d1ecf1;

	/* Orange variants for subtle backgrounds */
	--hampton-orange-subtle: rgba(255, 140, 66, 0.12);
	--hampton-orange-faint:  rgba(255, 140, 66, 0.06);

	/* === Sidebar (G Dark Sidebar — 250px, black) === */
	--sidebar-width:         250px;
	--sidebar-bg:            #1c1c1e;
	--sidebar-border:        rgba(255, 255, 255, 0.08);
	--sidebar-text:          rgba(255, 255, 255, 0.5);
	--sidebar-text-hover:    rgba(255, 255, 255, 0.8);
	--sidebar-text-active:   #FF8C42;
	--sidebar-link-hover-bg: rgba(255, 255, 255, 0.06);
	--sidebar-link-active-bg: rgba(255, 140, 66, 0.15);
	--sidebar-badge-bg:      #FF8C42;
	--sidebar-badge-text:    #ffffff;
	--sidebar-section-text:  rgba(255, 255, 255, 0.2);

	/* === Content Area (G warm cream) === */
	/* === Content Area (G warm cream) ===
	   Do not change this to a neutral gray to make cards stand out. That was tried
	   on 2026-08-24 and it was solving the wrong problem: the dark ground it was
	   fighting came from the staging-only safety guard, which production does not
	   load. The gray shipped to production and turned the live dashboard gray. */
	--bg-warm:               #faf8f5;
	--border-warm:           #ebe6df;
	--bg-warm-hover:         #fdfcfa;

	/* Dashboard font — Inter for the dashboard UI */
	--font-dashboard:        'Inter', sans-serif;
}