/* ==========================================================================
   VOLATA TRAVELS — DESIGN TOKENS
   Premium travel-operator design system. Evolved from the original flat
   system toward a warmer, more dimensional look — soft shadows, rounded
   corners, tasteful gradients — while keeping the brand palette and
   typography intact. All colour, type and spacing values live here —
   every other stylesheet references these custom properties instead of
   hard-coded values.
   ========================================================================== */

:root {

  /* ---- Brand colour ---------------------------------------------------- */
  /* Deep Ocean Blue — primary brand colour */
  --color-ocean-900: #082539;   /* darkest — footer, deep bands, high-contrast text */
  --color-ocean-800: #0B3A57;   /* primary — header, headings, hero band */
  --color-ocean-700: #0F4A6E;   /* lighter primary — hover states on ocean */
  --color-ocean-100: #E4EDF2;   /* pale ocean tint — alternating section band */

  /* Teal — call-to-action colour */
  --color-teal-800: #0B6358;    /* text-on-light — meets AA contrast on ivory/white */
  --color-teal-700: #0C8377;    /* CTA default, trust band */
  --color-teal-600: #129E8E;    /* decorative fills (icons, illustration) only — under AA for text */
  --color-teal-100: #E1F2EE;    /* pale teal tint — alternating section band */

  /* Golden Sand — premium accent, used sparingly */
  --color-sand-600: #D79A2C;    /* accent stroke / small highlights */
  --color-sand-500: #E9AE3E;    /* accent fill — badges, dividers */
  --color-sand-100: #FBECCC;    /* pale sand tint — small highlight chips */

  /* Warm neutrals — backgrounds stay mostly ivory/white so photography
     (and, here, illustration) stays the visual focus */
  --color-ivory: #FFFFFF;
  --color-ivory-dim: #F5F6F7;   /* subtle neutral tint for card fields, section separation */
  --color-white: #FFFFFF;

  /* Text */
  --color-ink: #0F2A3D;         /* primary text on light backgrounds */
  --color-ink-soft: #4C6579;    /* secondary / muted text on light backgrounds */
  --color-ink-on-dark: #F4F8F7; /* primary text on ocean/teal bands */
  --color-ink-on-dark-soft: #AFC4D1; /* secondary text on ocean/teal bands */

  --color-line: #E1D6BE;        /* hairline rule on ivory */
  --color-line-on-dark: rgba(244, 248, 247, 0.22);

  /* ---- Typography --------------------------------------------------------
     System serif, weight-based hierarchy. Times New Roman is a built-in
     system font on virtually all devices — no font files to load. */
  --font-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', 'Times New Roman', serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --text-eyebrow: 0.8125rem;               /* 13px */
  --text-small: 0.9375rem;                 /* 15px */
  --text-body: 1.0625rem;                  /* 17px */
  --text-body-lg: 1.1875rem;               /* 19px */
  --text-h4: 1.375rem;                     /* 22px */
  --text-h3: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);      /* 24–30px */
  --text-h2: clamp(2rem, 1.5rem + 2vw, 2.75rem);         /* 32–44px */
  --text-hero: clamp(2.5rem, 1.6rem + 4vw, 3.75rem);     /* 40–60px */
  --text-stat: clamp(2.75rem, 2rem + 3vw, 4rem);         /* 44–64px */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* ---- Spacing scale (4px base) ------------------------------------- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---- Layout --------------------------------------------------------- */
  --content-max: 1200px;
  --content-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---- Shape -----------------------------------------------------------
     Softer, more contemporary geometry than the original flat system —
     rounded cards and pill-ish buttons read as premium/modern for a
     travel brand, while badges keep a tighter radius for contrast. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-subtle: 1px solid var(--color-line);

  /* ---- Shadow ------------------------------------------------------------
     Warm, ocean-tinted shadows (never pure black) so elevation still feels
     on-brand. Three tiers: resting cards, hover/elevated, and hero-level. */
  --shadow-sm: 0 2px 8px rgba(8, 37, 57, 0.08);
  --shadow-md: 0 8px 24px rgba(8, 37, 57, 0.12);
  --shadow-lg: 0 20px 48px rgba(8, 37, 57, 0.18);
  --shadow-teal: 0 10px 28px rgba(12, 131, 119, 0.28);

  /* ---- Gradients -----------------------------------------------------
     Used sparingly — hero/CTA bands and premium accents only, never as a
     substitute for the flat colour bands elsewhere on the site. */
  --gradient-ocean: linear-gradient(135deg, #0B3A57 0%, #0F4A6E 55%, #0C8377 100%);
  --gradient-teal: linear-gradient(135deg, #129E8E 0%, #0C8377 100%);
  --gradient-sand: linear-gradient(135deg, #F0C368 0%, #E9AE3E 100%);
  --gradient-overlay: linear-gradient(180deg, rgba(8,37,57,0) 0%, rgba(8,37,57,0.55) 100%);

  /* ---- Motion ----------------------------------------------------------
     Colour, elevation and gentle transform on hover — smooth but fast,
     never gratuitous. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-standard: 250ms;
  --duration-slow: 400ms;
}