/* ==========================================================================
   INDEX VARIABLES
   CSS Custom Properties & Design Tokens for index.html
   ========================================================================== */

:root {
    /* ==========================================================================
       COLOR PALETTE - INDEX SPECIFIC
       ========================================================================== */
    
    --index-primary: #C94A2A;        /* Primary red */
    --index-accent: #2A5C4E;         /* Accent green */
    --index-charcoal: #2C2625;       /* Text color */
    --index-cream: #FBF7F2;          /* Background cream */
    --index-cream-alt: #F9F3EB;      /* Alternative cream */
    --index-gold: #D4925A;           /* Gold accent */
    
    /* ==========================================================================
       BACKGROUND GRADIENTS
       ========================================================================== */
    
    --index-bg-gradient: linear-gradient(135deg, #FBF7F2 0%, #F9F3EB 100%);
    --index-card-bg: white;
    
    /* ==========================================================================
       RGBA VARIATIONS
       ========================================================================== */
    
    /* Primary variations */
    --index-primary-05: rgba(201, 74, 42, 0.05);
    --index-primary-08: rgba(201, 74, 42, 0.08);
    --index-primary-10: rgba(201, 74, 42, 0.1);
    --index-primary-20: rgba(201, 74, 42, 0.2);
    --index-primary-30: rgba(201, 74, 42, 0.3);
    
    /* Accent variations */
    --index-accent-10: rgba(42, 92, 78, 0.1);
    --index-accent-20: rgba(42, 92, 78, 0.2);
    
    /* Charcoal variations */
    --index-charcoal-40: rgba(44, 38, 37, 0.4);
    --index-charcoal-80: rgba(44, 38, 37, 0.8);
    
    /* ==========================================================================
       SHADOWS - INDEX SPECIFIC
       ========================================================================== */
    
    --index-shadow-soft: 3px 7px 19px rgba(201, 74, 42, 0.09), -2px 3px 12px rgba(42, 92, 78, 0.04);
    --index-shadow-medium: 5px 12px 25px rgba(201, 74, 42, 0.12), -3px 5px 15px rgba(44, 38, 37, 0.07);
    --index-shadow-strong: 8px 18px 35px rgba(201, 74, 42, 0.15), -5px 8px 22px rgba(44, 38, 37, 0.08);

    /* Web.html compatibility variables for FAQ */
    --warmth-primary: #C94A2A;
    --warmth-charcoal: #2C2625;
    --warmth-shadow-soft: 3px 7px 19px rgba(201, 74, 42, 0.09), -2px 3px 12px rgba(42, 92, 78, 0.04);
    --warmth-shadow-medium: 5px 12px 25px rgba(201, 74, 42, 0.12), -3px 5px 15px rgba(44, 38, 37, 0.07);
    
    /* ==========================================================================
       TIMING FUNCTIONS
       ========================================================================== */
    
    --index-ease-organic: cubic-bezier(0.23, 1, 0.32, 1);
    --index-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ==========================================================================
       TYPOGRAPHY
       ========================================================================== */
    
    /* Typography Scale */
    --index-font-primary: 'Space Grotesk', -apple-system, system-ui, sans-serif;
    --index-font-serif: 'Crimson Text', serif;
    --index-font-display: 'Playfair Display', serif;
    
    /* Typography Scale - Size System */
    --index-text-xs: 0.75rem;    /* 12px */
    --index-text-sm: 0.875rem;   /* 14px */
    --index-text-base: 1rem;     /* 16px */
    --index-text-lg: 1.125rem;   /* 18px */
    --index-text-xl: 1.25rem;    /* 20px */
    --index-text-2xl: 1.5rem;    /* 24px */
    --index-text-3xl: 1.875rem;  /* 30px */
    --index-text-4xl: 2.25rem;   /* 36px */
    --index-text-5xl: 3rem;      /* 48px */
    
    /* Line Heights */
    --index-leading-tight: 1.25;
    --index-leading-normal: 1.5;
    --index-leading-relaxed: 1.75;
    
    /* ==========================================================================
       SPACING & SIZING
       ========================================================================== */
    
    --index-container-max: 1240px;
    --index-container-padding: 2rem;
    --index-header-height: 80px;
    
    /* ==========================================================================
       BORDER RADIUS - ORGANIC
       ========================================================================== */
    
    --index-radius-sm: 8px;
    --index-radius-md: 12px 8px 15px 10px;
    --index-radius-lg: 15px 12px 18px 10px;
    --index-radius-xl: 20px 15px 25px 10px;
    
    /* ==========================================================================
       CURSOR
       ========================================================================== */
    
    --index-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='%23C94A2A' opacity='0.5'/%3E%3C/svg%3E"), auto;
}