/* Franklin's Reliable Garage Door — Design Tokens & Variables */
:root {
  /* Brand Palette */
  --color-cream: #F5F0E7;
  --color-cream-light: #FAF7F2;
  --color-cream-card: #EDE7DC;
  --color-cream-dark: #E2D9CA;
  
  --color-silver: #B9BDC3;
  --color-silver-light: #E5E7EB;
  --color-silver-border: #D1D5DB;
  
  --color-navy: #202B3B;
  --color-navy-dark: #161E2A;
  --color-navy-deep: #0F151E;
  --color-navy-surface: #29374B;
  
  --color-graphite: #242424;
  --color-graphite-light: #3A3A3A;
  --color-graphite-muted: #666666;
  
  /* Accent Metallic / Warm Amber */
  --color-accent-gold: #C5933C;
  --color-accent-gold-hover: #D8A54B;
  --color-accent-gold-light: #F9F1E2;
  --color-accent-gold-dark: #8E651E;

  /* Glassmorphism Design Tokens */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-bg-card: rgba(255, 255, 255, 0.82);
  --glass-bg-dark: rgba(32, 43, 59, 0.82);
  --glass-bg-deep: rgba(15, 21, 30, 0.88);
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-border-subtle: rgba(255, 255, 255, 0.22);
  --glass-border-dark: rgba(255, 255, 255, 0.14);
  --glass-border-gold: rgba(197, 147, 60, 0.35);
  --glass-blur: blur(16px);
  --glass-blur-lg: blur(28px);
  --glass-shadow: 0 12px 32px 0 rgba(32, 43, 59, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
  --glass-shadow-dark: 0 16px 40px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);

  /* 3D Tactile Buttons & Gradients */
  --gold-gradient: linear-gradient(180deg, #E6B85E 0%, #C5933C 55%, #AA7A28 100%);
  --gold-gradient-hover: linear-gradient(180deg, #F0C66F 0%, #D8A54B 55%, #BC8A32 100%);
  --gold-gradient-active: linear-gradient(180deg, #B8852B 0%, #A57422 100%);
  
  --navy-gradient: linear-gradient(180deg, #2E3E55 0%, #202B3B 55%, #151D28 100%);
  --navy-gradient-hover: linear-gradient(180deg, #374A66 0%, #29374B 55%, #1B2635 100%);
  
  --3d-shadow-gold: 0 5px 0 #855E19, 0 10px 22px rgba(197, 147, 60, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.5);
  --3d-shadow-gold-hover: 0 7px 0 #855E19, 0 14px 28px rgba(197, 147, 60, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  --3d-shadow-gold-active: 0 1px 0 #855E19, 0 4px 10px rgba(197, 147, 60, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.25);
  
  --3d-shadow-navy: 0 5px 0 #0C1118, 0 10px 22px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  --3d-shadow-navy-hover: 0 7px 0 #0C1118, 0 14px 28px rgba(0, 0, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.3);
  --3d-shadow-navy-active: 0 1px 0 #0C1118, 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.35);

  /* Text */
  --text-primary: #242424;
  --text-secondary: #525866;
  --text-muted: #79808E;
  --text-light: #F5F0E7;
  --text-light-muted: #B9BDC3;
  
  /* Typography */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Elevation & Shadows */
  --shadow-sm: 0 2px 6px rgba(32, 43, 59, 0.05);
  --shadow-md: 0 6px 16px rgba(32, 43, 59, 0.08);
  --shadow-lg: 0 12px 28px rgba(32, 43, 59, 0.12);
  --shadow-xl: 0 24px 48px rgba(32, 43, 59, 0.18);
  --shadow-glow: 0 0 25px rgba(197, 147, 60, 0.4);
  
  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 9999px;
  
  /* Layout */
  --container-max: 1240px;
  --container-wide: 1360px;
  --header-height: 82px;
  --topbar-height: 38px;
  
  /* Transitions */
  --transition-fast: 0.16s ease;
  --transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}