/* TLA Travels — design tokens. Edit values here; components read the variables. */
:root {
  /* Brand palette (supplied) */
  --snow:  #FAFAFA;
  --mist:  #E8F1F5;
  --ocean: #005691;
  --navy:  #004A7C;

  /* Derived */
  --navy-deep: #00365c;
  --ocean-soft: #2f7aac;
  --sky: #d9e9f2;
  --ink: #0f2a3f;
  --ink-soft: #3d6a8a;
  --muted: #6b8699;
  --line: #d4e2ea;
  --line-soft: #e6eef3;
  --surface: #ffffff;

  /* Accent: the orange from the logo, with the logo's sunset for small flourishes */
  --accent: #f47a20;
  --accent-deep: #d9620c;
  --accent-soft: #fff0e4;
  --sunset: #c81f6d;
  --violet: #5b2da8;

  /* Status */
  --success: #1f8a5b;
  --success-soft: #e4f5ec;
  --warn: #c7811a;
  --warn-soft: #fff3df;
  --danger: #c93b3b;
  --danger-soft: #fdeaea;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, var(--navy) 0%, var(--ocean) 100%);
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--sunset) 100%);
  --grad-sky: linear-gradient(180deg, var(--navy) 0%, var(--ocean) 45%, var(--mist) 100%);

  /* Type */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Figtree", "Segoe UI", system-ui, sans-serif;

  --fs-hero: clamp(2.4rem, 5.4vw, 4.6rem);
  --fs-xxxl: clamp(2rem, 3.6vw, 3.1rem);
  --fs-xxl: clamp(1.6rem, 2.6vw, 2.3rem);
  --fs-xl: clamp(1.3rem, 1.8vw, 1.6rem);
  --fs-lg: 1.15rem;
  --fs-md: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.78rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-base: 1.6;

  /* Spacing */
  --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;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Shadows (tinted navy) */
  --shadow-xs: 0 1px 2px rgba(0, 54, 92, .06);
  --shadow-sm: 0 4px 14px rgba(0, 54, 92, .08);
  --shadow-md: 0 12px 32px rgba(0, 54, 92, .14);
  --shadow-lg: 0 24px 60px rgba(0, 54, 92, .22);
  --shadow-glow: 0 0 0 4px rgba(0, 86, 145, .18);

  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 500ms;

  /* Layout */
  --container-max: 1240px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --nav-h: 76px;   /* layout.js keeps this in sync with the real header height */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}