/* ==========================================================================
   5 STAR CONSTRUCTION COMPANY — DESIGN SYSTEM TOKENS
   Brown & White Luxury Architecture Theme
   ========================================================================== */

:root {
  /* Brown & White Luxury Architecture Palette */
  --color-primary-brown: #381D0E;
  --color-deep-brown: #241208;
  --color-dark-espresso: #1A0C05;
  --color-brand-accent: #A6652C;         /* Warm metallic bronze from logo */
  --color-brand-accent-hover: #8C4E1A;
  --color-brand-gold: #C68642;           /* Golden bronze highlight */
  --color-white: #FFFFFF;
  --color-light-bg: #F9F6F0;             /* Warm alabaster / linen white */
  --color-surface-white: #FFFFFF;
  --color-metallic-gray: #A39082;        /* Warm architectural taupe */
  --color-text-main: #261308;            /* Deep warm espresso for high contrast readability */
  --color-text-muted: #6E5D53;           /* Warm muted earth tone */
  --color-text-light: #F7F2EB;
  --color-border-subtle: #E8DFD5;
  --color-border-dark: #4A2713;
  --color-border-highlight: rgba(166, 101, 44, 0.45);

  /* Legacy mappings for seamless compatibility */
  --color-primary-navy: var(--color-primary-brown);
  --color-deep-navy: var(--color-deep-brown);
  --color-brand-red: var(--color-brand-accent);
  --color-brand-red-hover: var(--color-brand-accent-hover);

  /* Functional Gradients & Alpha Overlays */
  --overlay-brown-deep: rgba(36, 18, 8, 0.92);
  --overlay-brown-soft: rgba(56, 29, 14, 0.82);
  --overlay-gradient-hero: linear-gradient(135deg, rgba(26, 12, 5, 0.96) 0%, rgba(56, 29, 14, 0.88) 55%, rgba(26, 12, 5, 0.94) 100%);
  --overlay-card-dark: linear-gradient(180deg, rgba(56, 29, 14, 0.08) 0%, rgba(36, 18, 8, 0.92) 100%);
  --glow-accent: 0 8px 30px rgba(166, 101, 44, 0.35);
  --glow-brown: 0 10px 40px rgba(36, 18, 8, 0.4);
  --glow-red: var(--glow-accent);
  --glow-navy: var(--glow-brown);

  /* Typography Stacks */
  --font-heading: 'Plus Jakarta Sans', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, Monaco, monospace;

  /* Font Sizes using clamp() for fluid, responsive typography */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.375rem);
  --text-4xl: clamp(1.85rem, 1.6rem + 1.2vw, 3rem);
  --text-5xl: clamp(2.15rem, 1.8rem + 1.8vw, 4rem);

  /* Line Heights */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Spacing Scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Fluid Responsive Spacing Tokens */
  --page-padding: clamp(1rem, 3.5vw, 2.5rem);
  --section-spacing: clamp(2.75rem, 5.5vw, 6rem);

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  /* Elevation Shadows */
  --shadow-sm: 0 2px 8px rgba(36, 18, 8, 0.06);
  --shadow-md: 0 6px 20px rgba(36, 18, 8, 0.09);
  --shadow-lg: 0 16px 36px rgba(36, 18, 8, 0.14);
  --shadow-xl: 0 24px 56px rgba(26, 12, 5, 0.22);
  --shadow-dark: 0 20px 50px rgba(0, 0, 0, 0.45);

  /* Transitions & Animation Timings */
  --timing-micro: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --timing-interface: 350ms cubic-bezier(0.16, 1, 0.3, 1);
  --timing-section: 700ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout Widths */
  --max-width-content: 1280px;
  --max-width-wide: 1440px;
  --max-width-narrow: 840px;
  --header-height: 84px;
  --header-height-mobile: 72px;

  /* Z-Index Hierarchy */
  --z-negative: -1;
  --z-base: 1;
  --z-elevated: 10;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-header: 1000;
  --z-modal-backdrop: 1100;
  --z-modal: 1200;
  --z-floating: 1300;
}