/* ==========================================================================
   The Leo's Voyage — Design Tokens & CSS Variables
   ========================================================================== */

:root {
  /* Brand Colors */
  --color-brand-teal: #044142;
  --color-brand-teal-dark: #022B2C;
  --color-brand-teal-soft: #085455;
  --color-brand-teal-light: #0D696B;
  --color-brand-teal-subtle: rgba(4, 65, 66, 0.06);

  --color-brand-gold: #D5AF5C;
  --color-brand-gold-hover: #BE9744;
  --color-brand-gold-dark: #A47D2E;
  --color-brand-gold-light: #FAF4E6;
  --color-brand-gold-subtle: rgba(213, 175, 92, 0.15);

  --color-cream: #F7F5EF;
  --color-cream-soft: #FAF9F5;
  --color-white: #FFFFFF;
  
  --color-ink: #142222;
  --color-ink-light: #2A3C3C;
  --color-muted: #5E7171;
  --color-muted-light: #8E9F9F;
  --color-border: #DCE5E3;
  --color-border-subtle: #EBEFEF;

  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #1EBE5D;

  /* Typography */
  --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Type Scale */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 2rem;      /* 32px */
  --font-size-3xl: 2.5rem;    /* 40px */
  --font-size-4xl: 3.25rem;   /* 52px */
  --font-size-5xl: 4.25rem;   /* 68px */

  /* Fluid Display Sizing */
  --fluid-h1: clamp(2.35rem, 5vw + 1rem, 4.25rem);
  --fluid-h2: clamp(1.85rem, 3.5vw + 0.75rem, 3rem);
  --fluid-h3: clamp(1.35rem, 2vw + 0.5rem, 1.85rem);
  --fluid-subheading: clamp(1rem, 1.2vw + 0.6rem, 1.2rem);

  /* Spacing */
  --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 */
  --space-5xl: 8rem;    /* 128px */

  /* Layout Containers */
  --container-max-width: 1280px;
  --container-narrow-width: 960px;
  --container-wide-width: 1400px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);

  /* Elevation / Shadows */
  --shadow-sm: 0 2px 8px rgba(20, 34, 34, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 34, 34, 0.06);
  --shadow-lg: 0 16px 40px rgba(4, 65, 66, 0.08);
  --shadow-xl: 0 24px 60px rgba(4, 65, 66, 0.12);
  --shadow-gold: 0 8px 25px rgba(213, 175, 92, 0.25);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* Transitions */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --transition-fast: 160ms var(--ease-out);
  --transition-base: 220ms var(--ease-out);
  --transition-slow: 320ms var(--ease-out);
}