/* ──────────────────────────────────────────────
   DESIGN TOKENS — Mako Tours Bonaire
   Ocean + sunset palette for a deep-sea charter brand.
─────────────────────────────────────────────── */
:root {
  /* Brand colors */
  --c-deep:    #061a2b;   /* deepest ocean — darkest sections */
  --c-navy:    #0a2540;   /* primary dark */
  --c-navy-2:  #0e3357;   /* lifted navy (cards on dark) */
  --c-blue:    #1268b3;   /* ocean blue */
  --c-teal:    #0bb4c4;   /* bright aqua-teal (primary accent) */
  --c-aqua:    #5fd6e3;   /* light aqua (highlights) */
  --c-coral:   #ff6b35;   /* sunset coral — CTAs */
  --c-coral-d: #e8551f;   /* coral hover */
  --c-gold:    #ffc14d;   /* sandy gold — stars / small accents */

  --c-cream:   #f5f9fc;   /* page background (light) */
  --c-white:   #ffffff;
  --c-text:    #0c1d2e;   /* body text on light */
  --c-muted:   #5a6b7b;   /* secondary text */
  --c-line:    rgba(10, 37, 64, 0.12);
  --c-line-d:  rgba(255, 255, 255, 0.14);

  /* Surfaces */
  --surface:        var(--c-white);
  --surface-cream:  var(--c-cream);
  --surface-dark:   var(--c-navy);
  --on-dark:        rgba(255, 255, 255, 0.92);
  --on-dark-muted:  rgba(255, 255, 255, 0.66);

  /* Gradients */
  --grad-ocean:  linear-gradient(160deg, #061a2b 0%, #0a2540 45%, #0e3357 100%);
  --grad-cta:    linear-gradient(135deg, #ff7d4d 0%, #ff6b35 55%, #e8551f 100%);
  --grad-teal:   linear-gradient(135deg, #0bb4c4 0%, #1268b3 100%);
  --grad-hero-veil: linear-gradient(180deg, rgba(6,26,43,0.35) 0%, rgba(6,26,43,0.55) 55%, rgba(6,26,43,0.85) 100%);

  /* Typography */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.3rem;
  --fs-2xl:  1.6rem;
  --fs-3xl:  2rem;
  --fs-4xl:  2.6rem;
  --fs-hero: clamp(2.6rem, 6.5vw, 5rem);
  --lh-tight: 1.1;
  --lh-body:  1.7;

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Radii */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  /* Shadows */
  --sh-sm: 0 2px 8px rgba(6, 26, 43, 0.08);
  --sh-md: 0 8px 28px rgba(6, 26, 43, 0.12);
  --sh-lg: 0 20px 50px rgba(6, 26, 43, 0.22);
  --sh-glow: 0 12px 40px rgba(11, 180, 196, 0.35);

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 260ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 500ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --container:     1200px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);
  --nav-h:         72px;

  /* Z-index */
  --z-nav:     100;
  --z-fab:     200;
  --z-overlay: 300;
  --z-lightbox:400;
}

/* ──────────────────────────────────────────────
   DARK THEME — overrides the light surface/text tokens.
   Surfaces (--surface, --surface-cream) follow because they reference
   --c-white / --c-cream, which are substituted at use time.
─────────────────────────────────────────────── */
html[data-theme="dark"] {
  --c-cream: #0b1622;   /* page background */
  --c-white: #11263a;   /* lifted cards / "white" sections */
  --c-text:  #e8f1f8;
  --c-muted: #9fb4c6;
  --c-line:  rgba(255, 255, 255, 0.12);

  --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.40);
  --sh-md: 0 8px 28px rgba(0, 0, 0, 0.45);
  --sh-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
}
/* Components that hard-code the dark brand navy as *text* on light surfaces */
html[data-theme="dark"] .chip,
html[data-theme="dark"] .contact-card .v,
html[data-theme="dark"] .faq__q,
html[data-theme="dark"] .field label { color: var(--c-text); }
/* Booking inputs: keep them dark instead of the light-mode white fill */
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea { background: rgba(255, 255, 255, 0.05); color: var(--c-text); }
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .field textarea:focus { background: rgba(255, 255, 255, 0.09); }

html[data-theme="dark"] body { background: var(--c-cream); }

/* Smooth the flip between themes (fallback when View Transitions aren't supported) */
body { transition: background var(--t-base), color var(--t-base); }

/* Theme switch: a clean circular wipe instead of the default cross-fade.
   The new view is clip-path-animated from the toggle button in main.js. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 9999; }