/* ==========================================================================
   CEYLEONS LEISURE - DESIGN TOKENS & CSS VARIABLES
   Theme: Sri Lankan Tropical Wellness, Earth & Ocean Tones
   Target: Mature, Senior & Differently Abled European Travellers
   ========================================================================== */

:root {
  /* Brand Color Palette */
  --color-primary-dark: #123324;      /* Deep Ceylon Forest Green */
  --color-primary: #1b4332;           /* Rich Evergreen */
  --color-primary-light: #2d6a4f;     /* Palm & Tea Foliage */
  --color-primary-subtle: #d8f3dc;    /* Pale Sage Background Tint */

  --color-accent-earth: #8d5b4c;      /* Warm Ceylon Cinnamon / Terra */
  --color-accent-warm: #b07d62;       /* Warm Earth Clay */
  --color-accent-sand: #d4a373;       /* Golden Coconut Husk / Sun Sand */
  
  --color-ocean: #1f6e6c;             /* Indian Ocean Teal */
  --color-ocean-light: #48a9a6;       /* Coastal Surf Accent */
  
  --color-whatsapp: #25d366;          /* Official WhatsApp Brand Color */
  --color-whatsapp-dark: #128c7e;     /* WhatsApp Dark Accent */

  /* Neutral Surface & Background Colors */
  --color-bg-base: #fbf8f3;           /* Warm Sand/Alabaster Page Background */
  --color-bg-surface: #ffffff;        /* Pure White Card Surface */
  --color-bg-subtle: #f4efea;         /* Muted Warm Linen */
  --color-bg-alt: #eae2d6;            /* Deep Sand Accent Surface */
  
  /* Text & Typography Colors (High Contrast WCAG AAA Compliant) */
  --color-text-main: #1a202c;         /* Deep Charcoal (Contrast ratio > 12:1 against light bg) */
  --color-text-muted: #3d4a58;        /* Slate Charcoal (Contrast ratio > 7:1) */
  --color-text-light: #ffffff;        /* Pure White for dark surfaces */
  --color-text-accent: #1b4332;       /* Forest Brand Text */
  
  /* Borders & Dividers */
  --color-border-subtle: #e2d9cf;
  --color-border-strong: #8d5b4c;
  --color-focus-ring: #005f73;        /* Prominent Accessible Focus Indicator */

  /* Semantic State Colors */
  --color-success: #1b663b;
  --color-success-bg: #e8f5e9;
  --color-warning: #995d00;
  --color-warning-bg: #fff8e1;
  --color-error: #a81c1c;
  --color-error-bg: #ffebee;
  --color-info: #0d47a1;
  --color-info-bg: #e3f2fd;

  /* Typography Scale */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-dyslexic: 'OpenDyslexic', 'Comic Sans MS', sans-serif;

  /* Fluid & Scalable Base Font Size (controlled by accessibility engine) */
  --base-font-size: 1.125rem;         /* 18px standard base for senior legibility */
  --font-scale-factor: 1;             /* Dynamic factor: 1.0, 1.15, or 1.30 */

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights for Enhanced Readability */
  --line-height-tight: 1.25;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* Spacing Scale (8pt grid system) */
  --space-2xs: 0.25rem;               /* 4px */
  --space-xs: 0.5rem;                 /* 8px */
  --space-sm: 0.75rem;                /* 12px */
  --space-md: 1rem;                   /* 16px */
  --space-lg: 1.5rem;                 /* 24px */
  --space-xl: 2rem;                   /* 32px */
  --space-2xl: 3rem;                  /* 48px */
  --space-3xl: 4.5rem;                /* 72px */
  --space-4xl: 6rem;                  /* 96px */

  /* Border Radii (gentle, organic curves) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows (Subtle, soft elevation) */
  --shadow-sm: 0 2px 4px rgba(27, 67, 50, 0.06);
  --shadow-md: 0 4px 12px rgba(27, 67, 50, 0.08);
  --shadow-lg: 0 10px 25px rgba(27, 67, 50, 0.12);
  --shadow-hover: 0 12px 30px rgba(27, 67, 50, 0.16);

  /* Layout Containers */
  --container-max-width: 1240px;
  --container-narrow-width: 860px;
  --header-height: 80px;

  /* Accessible Tap / Click Targets (WCAG 2.5.5 minimum 44px) */
  --min-tap-target: 48px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}