/* ========================================
   Let's Rock Barber Shop - CSS Variables
   Modern Dark Theme - 2026
   ======================================== */

:root {
  /* ===== Color Palette ===== */
  /* Backgrounds */
  --lr-bg-primary: #0a0a0a;
  --lr-bg-secondary: #111111;
  --lr-bg-tertiary: #1a1a1a;
  --lr-bg-elevated: #1f1f1f;

  /* Accent Colors */
  --lr-accent-gold: #c8a97e;
  --lr-accent-gold-light: #d4b88e;
  --lr-accent-gold-dark: #b89a6e;

  /* Text Colors */
  --lr-text-primary: #ffffff;
  --lr-text-secondary: #cccccc;
  --lr-text-tertiary: #999999;
  --lr-text-muted: #666666;

  /* Utility Colors */
  --lr-overlay-dark: rgba(10, 10, 10, 0.8);
  --lr-overlay-medium: rgba(10, 10, 10, 0.6);
  --lr-overlay-light: rgba(10, 10, 10, 0.4);
  --lr-border-color: rgba(200, 169, 126, 0.2);
  --lr-border-subtle: rgba(255, 255, 255, 0.1);

  /* ===== Typography ===== */
  /* Font Families */
  --lr-font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                     'Helvetica Neue', Arial, sans-serif;
  --lr-font-heading: 'Georgia', 'Times New Roman', serif;
  --lr-font-mono: 'Courier New', Courier, monospace;

  /* Font Sizes */
  --lr-text-xs: 0.75rem;      /* 12px */
  --lr-text-sm: 0.875rem;     /* 14px */
  --lr-text-base: 1rem;       /* 16px */
  --lr-text-lg: 1.125rem;     /* 18px */
  --lr-text-xl: 1.25rem;      /* 20px */
  --lr-text-2xl: 1.5rem;      /* 24px */
  --lr-text-3xl: 1.875rem;    /* 30px */
  --lr-text-4xl: 2.25rem;     /* 36px */
  --lr-text-5xl: 3rem;        /* 48px */
  --lr-text-6xl: 3.75rem;     /* 60px */
  --lr-text-7xl: 4.5rem;      /* 72px */

  /* Font Weights */
  --lr-weight-light: 300;
  --lr-weight-normal: 400;
  --lr-weight-medium: 500;
  --lr-weight-semibold: 600;
  --lr-weight-bold: 700;
  --lr-weight-extrabold: 800;

  /* Line Heights */
  --lr-leading-tight: 1.2;
  --lr-leading-normal: 1.5;
  --lr-leading-relaxed: 1.75;
  --lr-leading-loose: 2;

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

  /* Section Padding */
  --lr-section-padding: 5rem 0;
  --lr-section-padding-sm: 3rem 0;

  /* Container */
  --lr-container-max: 1200px;
  --lr-container-padding: 1.5rem;

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

  /* ===== Transitions ===== */
  --lr-transition-fast: 150ms ease-in-out;
  --lr-transition-base: 300ms ease-in-out;
  --lr-transition-slow: 500ms ease-in-out;
  --lr-transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== Shadows ===== */
  --lr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --lr-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --lr-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --lr-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
  --lr-shadow-glow: 0 0 20px rgba(200, 169, 126, 0.4);
  --lr-shadow-glow-strong: 0 0 30px rgba(200, 169, 126, 0.6);

  /* ===== Z-Index Scale ===== */
  --lr-z-dropdown: 1000;
  --lr-z-sticky: 1020;
  --lr-z-fixed: 1030;
  --lr-z-modal-backdrop: 1040;
  --lr-z-modal: 1050;
  --lr-z-popover: 1060;
  --lr-z-tooltip: 1070;

  /* ===== Grid & Layout ===== */
  --lr-grid-gap: 2rem;
  --lr-grid-gap-sm: 1rem;

  /* ===== Animation Durations ===== */
  --lr-animate-fast: 200ms;
  --lr-animate-normal: 400ms;
  --lr-animate-slow: 600ms;
}

/* ===== Breakpoints (Reference - Use in Media Queries) ===== */
/*
  Mobile First Approach:

  --lr-breakpoint-sm: 576px   (Small devices)
  --lr-breakpoint-md: 768px   (Tablets)
  --lr-breakpoint-lg: 1024px  (Desktop)
  --lr-breakpoint-xl: 1200px  (Large desktop)
  --lr-breakpoint-2xl: 1400px (Extra large)
*/

/* ===== Dark Mode Adjustments (Optional) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Already dark by default */
  }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --lr-transition-fast: 0ms;
    --lr-transition-base: 0ms;
    --lr-transition-slow: 0ms;
    --lr-animate-fast: 0ms;
    --lr-animate-normal: 0ms;
    --lr-animate-slow: 0ms;
  }
}