/* ============================================================================
   FILE: variables.css
   ============================================================================
   Global Design System & CSS Custom Properties.
   Contains all brand colors, typography tokens, border radii, transitions,
   and fluid spacing used across the entire application.

   ARCHITECTURE NOTE:
   All values are defined here as CSS custom properties (variables) to ensure
   a single source of truth. Component files reference these variables
   instead of hardcoding values, enabling easy brand-wide adjustments.
   ============================================================================ */

   /* Prevent layout shift when scrollbar vanishes during modal locks */
html {
    scrollbar-gutter: stable;
}

:root {
    /* --- 1. SHAPES & BORDERS --- */
    --card-radius: 8px;     /* Core radius for product cards, step boxes, and modals */
    --btn-radius: 4px;      /* Standard radius for all clickable buttons */
    --icon-radius: 6px;     /* Radius for small decorative elements and icons */

    /* --- 2. BRAND COLOR PALETTE --- */
    --primary-gold: #d4a017;       /* Main brand accent color (Royal Gold) */
    --primary-gold-light: rgba(212, 160, 23, 0.15); /* Subtle gold for borders */
    --primary-gold-hover: rgba(212, 160, 23, 0.6);  /* Gold border on hover */
    --wa-green: #25D366;           /* Authentic WhatsApp green for checkout flows */
    
    /* --- 3. BACKGROUND THEMES --- */
    --bg-body: #faf9f6;      /* Global website base background (Warm Off-white) */
    --bg-section: #FDFBF7;   /* Subtle off-white to visually separate sections */
    --bg-dark: #0a0a0a;      /* Dark theme background (Used primarily in footer) */
    
    /* --- 4. TYPOGRAPHY COLORS --- */
    --text-main: #111111;    /* Primary dark color for headings and bold text */
    --text-muted: #555555;   /* Lighter color for long paragraphs & descriptions */
    --text-sub: #777777;     /* Subdued color for subtitles & light borders */
    --text-light: #ffffff;   /* Pure white text for dark backgrounds/buttons */
    
    /* --- 5. GLOBAL FLUID SPACING & LAYOUT --- */
    /* Uses CSS clamp() to seamlessly adapt padding across Mobile, Tablet, and Desktop */
    --section-padding-top: clamp(50px, 6vw, 60px);
    --section-padding-bottom: clamp(30px, 4vw, 40px);

    /* --- 6. TRANSITION PRESETS --- */
    --transition-fast: 0.3s ease;
    --transition-smooth: 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
    --transition-bounce: 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}