/* ========================================
   CSS Variables
   Design System Tokens
   ======================================== */

:root {
  /* ========================================
     COLORS
     ======================================== */

  /* Primary (warm brown) */
  --color-primary: #8c7b63;
  --color-primary-light: #c4b49a;
  --color-primary-dark: #6b5d4a;

  /* Secondary (muted brown) */
  --color-secondary: #ada69c;

  /* Accent (gold) */
  --color-accent: #c4b49a;
  --color-accent-light: rgba(196,180,154,0.3);

  /* Gradients */
  --gradient-hero: linear-gradient(180deg, rgba(180,180,190,0.95) 0%, rgba(220,220,225,0.6) 50%, transparent 100%);
  --gradient-light: linear-gradient(135deg, #f4f2ed 0%, #e8e4dc 100%);
  --gradient-button: linear-gradient(135deg, #2c2620 0%, #3d3428 100%);
  --gradient-card: linear-gradient(180deg, #faf8f4 0%, #FFFFFF 100%);

  /* Standard section overlay — semi-transparent beige over fixed fon-bg */
  --section-overlay: linear-gradient(180deg,
    rgba(244,242,237, 0.92) 0%,
    rgba(244,242,237, 0.75) 50%,
    rgba(244,242,237, 0.95) 100%);

  /* Metallic body */
  --metallic-bg: linear-gradient(160deg, #C0C0C8 0%, #D8D8DD 30%, #E8E8EC 60%, #D0D0D6 100%);

  /* Button colors (warm standard) */
  --btn-primary-gradient: linear-gradient(135deg, #e8e4dc 0%, #f4f2ed 40%, #faf8f4 60%, #e8e4dc 100%);
  --btn-calc-gradient: linear-gradient(135deg, #2c2620 0%, #3d3428 100%);

  /* Glassmorphism — warm glass */
  --glass-bg: rgba(255,255,255,0.88);
  --glass-bg-hover: rgba(255,255,255,0.92);
  --glass-border: rgba(28, 26, 21, 0.07);
  --glass-shadow: 0 4px 24px rgba(28,26,21,0.06);
  --glass-blur: 12px;
  --glass-radius: 20px;

  /* Price accent */
  --color-price: #9B1B30;

  /* Neutrals (warm-tinted) */
  --color-white: #FFFFFF;
  --color-gray-50: #faf8f4;
  --color-gray-100: #f4f2ed;
  --color-gray-200: #e8e4dc;
  --color-gray-300: #d4cec4;
  --color-gray-400: #b0a99e;
  --color-gray-500: #78736a;
  --color-gray-600: #5e5850;
  --color-gray-700: #3d3830;
  --color-gray-800: #2a261f;
  --color-gray-900: #1c1a15;

  /* ========================================
     TYPOGRAPHY
     ======================================== */

  /* Font Families */
  --font-primary: 'Golos Text', sans-serif;
  --font-display: 'Lora', serif;

  /* Font Sizes (mobile-first) */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */

  /* ========================================
     SPACING (4px grid system)
     ======================================== */

  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */

  /* ========================================
     CONTAINER
     ======================================== */

  --container-max: 1280px;
  --container-padding: 1rem;

  /* ========================================
     BORDER RADIUS
     ======================================== */

  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-full: 9999px;

  /* ========================================
     SHADOWS
     ======================================== */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 4px 20px rgba(28, 26, 21, 0.06);
  --shadow-button: 0 4px 14px rgba(140, 123, 99, 0.25);

  /* ========================================
     ANIMATIONS
     ======================================== */

  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Desktop font sizes */
@media (min-width: 768px) {
  :root {
    --text-3xl: 2.25rem;   /* 36px */
    --text-4xl: 3rem;      /* 48px */
    --text-5xl: 3.75rem;   /* 60px */
    --container-padding: 2rem;
  }
}