/* ==========================================================================
   Design tokens — Jet Ski Dubai
   Single source of truth for colour, type, spacing, radius and elevation.
   ========================================================================== */

:root {
  /* Brand colours */
  --color-navy: #071c3c;
  --color-navy-80: #1c3456;
  --color-blue: #0878d9;
  --color-ocean: #00a8d8;
  --color-yellow: #ffe334;
  --color-yellow-dark: #f5d400;
  --color-bg: #f3f8fc;
  --color-white: #ffffff;

  /* Neutrals / text */
  --color-text: #0f2140;
  --color-text-muted: #4a5a73;
  --color-border: #dde7f1;
  --color-sky: #dcebf5;

  /* Typography */
  --font-heading: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-script: "Kaushan Script", "Brush Script MT", cursive;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;

  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.25rem;     /* 20px */
  --fs-xl: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  --fs-2xl: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
  --fs-display: clamp(2.9rem, 1.2rem + 5.6vw, 6rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 0.95;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  --tracking-eyebrow: 0.22em;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 0.4rem + 3vw, 5rem);
  --header-h: 72px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(7, 28, 60, 0.08);
  --shadow-md: 0 8px 24px rgba(7, 28, 60, 0.12);
  --shadow-lg: 0 18px 48px rgba(7, 28, 60, 0.18);
  --shadow-btn: 0 6px 16px rgba(7, 28, 60, 0.18);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 250ms;

  /* Layers */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
}

/* Breakpoints (reference — CSS custom properties can't be used in media queries)
   --bp-sm: 480px   phones (large)
   --bp-md: 768px   tablets
   --bp-lg: 1024px  small laptops
   --bp-xl: 1280px  desktop
*/