/**
 * TERMÓPILAS HUILA BRAND DESIGN TOKENS
 * Strategic brand system for consistent implementation
 */

:root {
  /* === BRAND FOUNDATION === */
  
  /* Primary Brand Colors */
  --brand-primary: #000000;        /* Sophisticated black - premium hospitality */
  --brand-secondary: #333333;      /* Charcoal - supporting text */
  --brand-accent: #F29F05;         /* Colombian gold - warmth & hospitality */
  
  /* Extended Brand Palette */
  --brand-earth: #8B4513;          /* Coffee brown - connection to cacao/coffee */
  --brand-nature: #228B22;         /* Forest green - natural setting */
  --brand-cream: #FDF6EA;          /* Warm cream - comfort & elegance */
  
  /* === SEMANTIC COLOR SYSTEM === */
  
  /* Functional Colors (WCAG AA Compliant) */
  --success: #10B981;              /* Forest green success */
  --warning: #F59E0B;              /* Amber warning */
  --error: #EF4444;                /* Clear red error */
  --info: #3B82F6;                 /* Blue information */
  
  /* Neutral Scale (Enhanced) */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  
  /* === SEMANTIC TOKENS === */
  
  /* Text Colors */
  --text-primary: var(--brand-primary);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-inverse: var(--brand-cream);
  
  /* Background Colors */
  --bg-primary: #FFFFFF;
  --bg-secondary: var(--brand-cream);
  --bg-warm: #F9F9F9;
  --bg-dark: var(--brand-primary);
  --bg-accent: var(--brand-accent);
  
  /* Interactive Colors */
  --interactive-primary: var(--brand-accent);
  --interactive-primary-hover: #D88A04;
  --interactive-secondary: var(--brand-primary);
  --interactive-secondary-hover: var(--gray-800);
  
  /* === TYPOGRAPHY TOKENS === */
  
  /* Font Families */
  --font-brand: 'Lora', Georgia, serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Font Sizes (Responsive Scale) */
  --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 */
  --text-6xl: 3.75rem;     /* 60px */
  
  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* === SPACING SYSTEM === */
  
  /* Base spacing unit */
  --space-unit: 0.25rem;   /* 4px base */
  
  /* Spacing Scale */
  --space-1: calc(var(--space-unit) * 1);    /* 4px */
  --space-2: calc(var(--space-unit) * 2);    /* 8px */
  --space-3: calc(var(--space-unit) * 3);    /* 12px */
  --space-4: calc(var(--space-unit) * 4);    /* 16px */
  --space-5: calc(var(--space-unit) * 5);    /* 20px */
  --space-6: calc(var(--space-unit) * 6);    /* 24px */
  --space-8: calc(var(--space-unit) * 8);    /* 32px */
  --space-10: calc(var(--space-unit) * 10);  /* 40px */
  --space-12: calc(var(--space-unit) * 12);  /* 48px */
  --space-16: calc(var(--space-unit) * 16);  /* 64px */
  --space-20: calc(var(--space-unit) * 20);  /* 80px */
  --space-24: calc(var(--space-unit) * 24);  /* 96px */
  
  /* === BORDER RADIUS === */
  
  --radius-sm: 0.125rem;   /* 2px */
  --radius-base: 0.25rem;  /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-full: 9999px;   /* Full round */
  
  /* === SHADOWS === */
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* === TRANSITIONS === */
  
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
  
  /* === BRAND-SPECIFIC TOKENS === */
  
  /* Colombian Cultural Colors */
  --colombian-coffee: #6F4E37;     /* Rich coffee brown */
  --colombian-emerald: #50C878;    /* Colombian emerald green */
  --colombian-sun: var(--brand-accent); /* Golden Colombian sun */
  
  /* Hospitality Experience Colors */
  --comfort-warm: var(--brand-cream);
  --luxury-dark: var(--brand-primary);
  --nature-fresh: var(--brand-nature);
  --authentic-earth: var(--brand-earth);
}

/* === ACCESSIBILITY ENHANCEMENTS === */

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --text-primary: #000000;
    --text-secondary: #000000;
    --bg-primary: #FFFFFF;
    --interactive-primary: #0066CC;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}

/* Dark mode preparation (future enhancement) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode tokens would go here */
    /* Currently maintaining light theme for brand consistency */
  }
}