/* ============================================
   Jupiter Planet XXL – Design 6: Light Orange Creative
   CSS Custom Properties
   ============================================ */

:root {
  /* ── Primary Colors ── */
  --color-primary: #ff6b00;
  --color-primary-light: #ff8c33;
  --color-primary-dark: #e05f00;
  --color-primary-rgb: 255, 107, 0;

  /* ── Secondary / Coral ── */
  --color-secondary: #e74c3c;
  --color-secondary-light: #f06a5e;
  --color-secondary-dark: #c0392b;

  /* ── Tertiary / Yellow ── */
  --color-tertiary: #ffc107;
  --color-tertiary-light: #ffd54f;
  --color-tertiary-dark: #f9a825;

  /* ── Backgrounds ── */
  --bg-white: #ffffff;
  --bg-warm-gray: #f9f6f2;
  --bg-warm-light: #fff8f0;
  --bg-hero-gradient: linear-gradient(135deg, #fff8f0 0%, #ffe8d6 50%, #ffd6b0 100%);
  --bg-cta-gradient: linear-gradient(135deg, #ff6b00 0%, #e74c3c 50%, #ffc107 100%);

  /* ── Text Colors ── */
  --text-body: #333333;
  --text-heading: #1a1a1a;
  --text-muted: #777777;
  --text-light: #999999;
  --text-white: #ffffff;

  /* ── Card ── */
  --card-bg: #ffffff;
  --card-radius: 16px;
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 12px 40px rgba(255, 107, 0, 0.15);

  /* ── Button Gradients ── */
  --btn-gradient: linear-gradient(135deg, #ff6b00, #e74c3c);
  --btn-gradient-hover: linear-gradient(135deg, #e05f00, #c0392b);
  --btn-radius: 50px;
  --btn-padding: 14px 36px;

  /* ── Fonts ── */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Lato', sans-serif;

  /* ── Font Weights ── */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  /* ── Font Sizes ── */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;
  --fs-4xl: 3rem;
  --fs-5xl: 3.5rem;
  --fs-hero: clamp(2.5rem, 6vw, 5rem);
  --fs-hero-sub: clamp(1.1rem, 2.5vw, 1.5rem);

  /* ── Spacing ── */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-section: 100px;

  /* ── Layout ── */
  --container-max: 1200px;
  --container-padding: 20px;
  --header-height: 80px;

  /* ── Transitions ── */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ── Borders ── */
  --border-light: 1px solid rgba(0, 0, 0, 0.06);
  --border-orange: 2px solid var(--color-primary);

  /* ── Z-index ── */
  --z-dropdown: 100;
  --z-navbar: 1000;
  --z-overlay: 2000;
  --z-modal: 3000;

  /* ── Gradients for product cards ── */
  --gradient-warm-1: linear-gradient(135deg, #ff6b00 0%, #ffc107 100%);
  --gradient-warm-2: linear-gradient(135deg, #e74c3c 0%, #ff6b00 100%);
  --gradient-warm-3: linear-gradient(135deg, #ffc107 0%, #ff6b00 100%);
  --gradient-warm-4: linear-gradient(135deg, #ff8c33 0%, #e74c3c 100%);
  --gradient-warm-5: linear-gradient(135deg, #f9a825 0%, #ff6b00 100%);
  --gradient-warm-6: linear-gradient(135deg, #ff6b00 0%, #ffd54f 100%);
}