/* ==========================================================================
   DazlinQ Travel — Design Tokens
   Palette derived from the client's own brand collateral (business card,
   flyers, logo): blush pink, gold, white on warm light backgrounds.
   ========================================================================== */

:root {
  /* --- Backgrounds: light and airy. There is no dark surface on this site. --- */
  --cream:        #FFFBFC;   /* page base                                   */
  --blush:        #FDF0F4;   /* alternating section                         */
  --blush-deep:   #F9E3EB;   /* callout band                                */
  --white:        #FFFFFF;   /* cards, surfaces                             */

  /* --- Brand pink -------------------------------------------------------
     Three tints, split by JOB rather than by taste. The brand pink is only
     4.7:1 on cream and 4.4:1 on blush — fine for large display type, but it
     fails WCAG AA for small text like nav links and footer links. So small
     text gets a slightly deeper pink that is indistinguishable to the eye
     and passes everywhere.                                            --- */
  --pink:         #D81B76;   /* brand pink: fills + LARGE display text only  */
  --pink-text:    #C11569;   /* small text, links, hover. 5.7:1 on cream     */
  --pink-deep:    #B71364;   /* button hover fill. white on it = 6.4:1       */
  --pink-hot:     #EC2C87;   /* decorative only — 3.98:1 with white, too low
                                for button labels. Gradients and icons only. */
  --pink-soft:    #F7C9DC;   /* tints, chips                                 */
  --pink-mist:    #FCEAF1;   /* very light fills                             */

  /* --- Gold -------------------------------------------------------------
     Same split. The bright gold is decorative-only (hairlines, rules, icon
     strokes) where no contrast minimum applies. Gold TEXT — eyebrows, footer
     headings — uses the deeper tone, because at 2.8:1 the bright gold was
     genuinely hard to read.                                           --- */
  --gold:         #C08F3C;   /* rules, hairlines, dividers — never text      */
  --gold-text:    #7E5B1D;   /* eyebrows, small caps headings. 6.0:1 cream   */
  --gold-light:   #E3C87F;

  /* --- Category accent -------------------------------------------------
     A third hue for the Cruise tag, kept inside the pink family as a deep
     berry rather than introducing an unrelated colour. Colour is only a
     reinforcement here — every card also carries a written label — so it
     needs to be pleasant, not maximally distinguishable.            --- */
  --berry:        #7A3B63;
  --berry-line:   rgba(122, 59, 99, .45);
  --pink-line:    rgba(216, 27, 118, .42);
  --gold-line:    rgba(192, 143, 60, .52);

  /* --- Ink: warm near-black, never pure #000 --- */
  --ink:          #3A2A30;   /* headings + body. 12.2:1 on --blush (AAA)     */
  --ink-soft:     #6B5A61;   /* secondary text. 6.3:1 on --cream (AA)        */
  --ink-faint:    #756369;   /* meta, captions. 4.6:1 on --blush-deep (AA)   */

  /* --- Borders --- */
  --line:         rgba(216, 27, 118, .14);
  --line-gold:    rgba(192, 143, 60, .30);
  --line-soft:    rgba(58, 42, 48, .09);

  /* --- Typography --- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-script:  'Dancing Script', 'Segoe Script', cursive;
  --font-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale */
  --t-hero:   clamp(2.9rem, 1.6rem + 5.6vw, 6.1rem);
  --t-h1:     clamp(2.3rem, 1.5rem + 3.2vw, 3.9rem);
  --t-h2:     clamp(1.95rem, 1.4rem + 2.3vw, 3.1rem);
  --t-h3:     clamp(1.15rem, 1.02rem + .55vw, 1.45rem);
  --t-lead:   clamp(1.02rem, .97rem + .28vw, 1.19rem);
  --t-body:   1rem;
  --t-small:  .875rem;
  --t-eyebrow:.68rem;

  /* --- Spacing scale --- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  /* Section rhythm + page gutters */
  --sec-y:    clamp(3.5rem, 2rem + 5vw, 7rem);
  --gutter:   clamp(1.25rem, .5rem + 3.5vw, 5rem);
  --maxw:     1240px;
  --maxw-text: 62ch;

  /* --- Radii --- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;  --r-pill: 999px;

  /* --- Shadows: warm-tinted, never neutral grey --- */
  --sh-sm: 0 1px 3px rgba(58, 42, 48, .06), 0 1px 2px rgba(58, 42, 48, .04);
  --sh-md: 0 4px 16px rgba(160, 60, 105, .08), 0 2px 6px rgba(58, 42, 48, .04);
  --sh-lg: 0 14px 40px rgba(160, 60, 105, .12), 0 4px 12px rgba(58, 42, 48, .05);
  --sh-xl: 0 24px 60px rgba(160, 60, 105, .16);

  /* --- Motion --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .28s;

  /* --- Layering --- */
  --z-nav: 100;  --z-drawer: 110;  --z-lightbox: 120;

  --nav-h: 78px;
}

@media (max-width: 900px) {
  :root { --nav-h: 64px; }
}