/* ===================================
   LET'S MOVE - CSS VARIABLES
   Extracted from Figma Design
   =================================== */

:root {
  /* ===== COLORS ===== */
  /* Primary Colors */
  --color-primary: #f9a61a;
  --color-primary-dark: #936210;
  --color-primary-rgb: 249, 166, 26;

  /* Background Colors */
  --color-bg-dark: #111111;
  --color-bg-darker: #0f0f0f;
  --color-bg-card: #1a1a1a;
  --color-bg-light: #fdfdfe;
  --color-bg-gray: #f9f9f9;

  /* Text Colors */
  --color-text-white: #fdfdfe;
  --color-text-gray: #a0a1a1;
  --color-text-dark: #111111;
  --color-text-muted: #6b6b6b;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #fdfdfe 0%, #f9a61a 98%);
  --gradient-bg: linear-gradient(180deg, #111111 0%, #49341f 100%);
  --gradient-button: linear-gradient(180deg, #f9a61a 0%, #936210 100%);
  --gradient-hero: linear-gradient(
    180deg,
    #111111 67.59%,
    rgba(74, 52, 15, 0.75) 100%
  );

  /* ===== TYPOGRAPHY ===== */
  --font-primary:
    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font Sizes - Desktop */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 60px;
  --font-size-hero: 72px;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ===== SPACING ===== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --spacing-5xl: 80px;
  --spacing-6xl: 100px;

  /* ===== LAYOUT ===== */
  --container-max-width: 1440px;
  --container-padding: 100px;
  --container-padding-mobile: 20px;

  /* ===== BORDERS ===== */
  --border-radius-sm: 5px;
  --border-radius-md: 10px;
  --border-radius-lg: 15px;
  --border-radius-xl: 20px;
  --border-radius-full: 50%;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 30px rgba(249, 166, 26, 0.3);
  --shadow-card: 0 4px 11.5px rgba(0, 0, 0, 0.33);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ===== Z-INDEX ===== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
/* 
   Mobile: < 768px
   Tablet: 768px - 1024px
   Desktop: > 1024px
   Large Desktop: > 1440px
*/