/* ===========================
   CONSTRUCTION COMPANY WEBSITE
   CSS VARIABLES & DESIGN SYSTEM
   =========================== */

:root {
  /* Brand Colors */
  --primary-color: #101820;           /* Rich charcoal - bold foundation */
  --surface-color: #19202a;           /* Dark surface for header/footer */
  --secondary-color: #f5ae1b;         /* Warm amber - energetic accent */
  --accent-color: #20c5aa;            /* Fresh teal - bright highlight */
  --light-gray: #f6f7fb;              /* Light background */
  --medium-gray: #8d97a2;             /* Soft text/borders */
  --dark-gray: #212a31;               /* Main body text */
  --background-color: #f8f9fb;        /* Page background */
  --white: #ffffff;
  --success-color: #23b58c;           /* For positive feedback */
  --warning-color: #f5ae1b;           /* For caution messages */
  --error-color: #ea4b4f;             /* For errors */

  /* Navbar (light theme overrides) */
  --navbar-bg: #ffffff;               /* White navbar background */
  --navbar-text: #212a31;             /* Dark text on navbar */
  --navbar-border: rgba(0, 0, 0, 0.06); /* Subtle bottom border */
  --navbar-hover-bg: rgba(0, 0, 0, 0.04); /* Hover background */

  /* Typography */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-secondary: 'Georgia', 'Times New Roman', serif;

  --font-size-xs: 0.75rem;            /* 12px */
  --font-size-sm: 0.875rem;           /* 14px */
  --font-size-base: 1rem;             /* 16px */
  --font-size-lg: 1.125rem;           /* 18px */
  --font-size-xl: 1.25rem;            /* 20px */
  --font-size-2xl: 1.5rem;            /* 24px */
  --font-size-3xl: 1.875rem;          /* 30px */
  --font-size-4xl: 2.25rem;           /* 36px */
  --font-size-5xl: 3rem;              /* 48px */

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Spacing */
  --space-xs: 0.25rem;                /* 4px */
  --space-sm: 0.5rem;                 /* 8px */
  --space-md: 1rem;                   /* 16px */
  --space-lg: 1.5rem;                 /* 24px */
  --space-xl: 2rem;                   /* 32px */
  --space-2xl: 3rem;                  /* 48px */
  --space-3xl: 4rem;                  /* 64px */
  --space-4xl: 6rem;                  /* 96px */

  /* Border Radius */
  --border-radius-sm: 0.25rem;        /* 4px */
  --border-radius-md: 0.5rem;         /* 8px */
  --border-radius-lg: 1rem;           /* 16px */
  --border-radius-xl: 1.5rem;         /* 24px */
  --border-radius-full: 9999px;       /* Pill-shaped */

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
  --shadow-none: 0 0 0 transparent;

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

  /* Container Widths */
  --container-max-width: 1280px;
  --container-padding: var(--space-md);

  /* Line Height */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* Breakpoints (used in media queries) */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
}