/**
 * Theme Design Tokens & CSS Variables
 *
 * Developed by Cusco Creativos
 * For: Hotel Rambla
 */

:root {
    /* --- COLOR PALETTE (HSL System for smooth gradients/modifications) --- */
    
    /* Primary Accent (Vivid Teal / Turquoise) */
    --color-primary-hue: 174;
    --color-primary-sat: 85%;
    --color-primary-light: hsl(var(--color-primary-hue), var(--color-primary-sat), 52%);
    --color-primary:       hsl(var(--color-primary-hue), var(--color-primary-sat), 38%);
    --color-primary-dark:  hsl(var(--color-primary-hue), var(--color-primary-sat), 25%);
    
    /* Secondary Accent (Slate / Charcoal - Deep Luxury Dark) */
    --color-secondary-hue: 215;
    --color-secondary-sat: 15%;
    --color-secondary:      hsl(var(--color-secondary-hue), var(--color-secondary-sat), 13%);
    --color-secondary-light:hsl(var(--color-secondary-hue), var(--color-secondary-sat), 25%);
    --color-secondary-dark: hsl(var(--color-secondary-hue), var(--color-secondary-sat), 8%);
    
    /* Base Colors & Backgrounds (Cool, Premium Clean Off-white) */
    --color-bg-base:       hsl(210, 12%, 97%);
    --color-bg-surface:    hsl(210, 8%, 93%);
    --color-bg-white:      hsl(0, 0%, 100%);
    
    /* Text Colors */
    --color-text-main:     hsl(215, 15%, 16%);
    --color-text-muted:    hsl(215, 10%, 45%);
    --color-text-light:    hsl(210, 10%, 90%);
    --color-text-white:    hsl(0, 0%, 100%);
    
    /* Semantic Colors */
    --color-accent-clay:   hsl(18, 45%, 45%); /* For highlights/buttons alternative */
    --color-success:       hsl(140, 30%, 40%);
    --color-warning:       hsl(35, 70%, 50%);
    --color-danger:        hsl(0, 60%, 45%);

    /* --- TYPOGRAPHY --- */
    --font-serif: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* Font Sizes (Fluid Scale using clamp for responsiveness) */
    --fs-xs:     clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
    --fs-sm:     clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
    --fs-base:   clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
    --fs-md:     clamp(1.15rem, 1.1rem + 0.25vw, 1.3rem);
    --fs-lg:     clamp(1.35rem, 1.28rem + 0.35vw, 1.55rem);
    --fs-xl:     clamp(1.6rem, 1.5rem + 0.5vw, 1.95rem);
    --fs-xxl:    clamp(2.1rem, 1.9rem + 1vw, 2.8rem);
    --fs-display: clamp(2.8rem, 2.4rem + 2vw, 4.2rem);
    
    /* Font Weights */
    --fw-light:    300;
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    
    /* Line Heights */
    --lh-tight:  1.2;
    --lh-heading:1.3;
    --lh-body:   1.65;
    
    /* --- SHADOWS --- */
    --shadow-sm:     0 2px 4px rgba(13, 17, 23, 0.04);
    --shadow-md:     0 8px 20px rgba(13, 17, 23, 0.06);
    --shadow-lg:     0 16px 36px rgba(13, 17, 23, 0.1);
    --shadow-inset:  inset 0 2px 4px rgba(0, 0, 0, 0.05);

    /* --- BORDERS & RADII --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    --border-thin: 1px solid rgba(13, 17, 23, 0.08);
    --border-medium: 2px solid rgba(13, 17, 23, 0.15);

    /* --- LAYOUT & SPACING --- */
    --container-max-width: 1280px;
    --container-padding: clamp(1rem, 4vw, 3rem);
    
    /* --- ANIMATION TRANSITIONS --- */
    --transition-fast:   all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}