/* ==========================================================================
   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 {
  /* --- Surfaces: light and airy. There is no dark surface on this site. ---
     Neutral, not pink. The client found the blush page bands too pink, so
     the page rhythm is white against a warm off-white. Warm rather than a
     cool grey, so the surfaces still sit comfortably next to the gold. Pink
     survives as accent — chips, icon circles, hairlines — never as a page
     background.                                                        --- */
  --white:        #FFFFFF;   /* cards, surfaces, white sections             */
  --cream:        #FEFDFC;   /* page base — white with the faintest warmth  */
  --off-white:    #F7F4F1;   /* alternating section band                    */
  --off-white-deep: #F2EEE9; /* callout band, page header                   */
  --sand:         #E2D9CD;   /* footer only — two steps deeper than any band
                                on the page, so the footer reads as the end
                                of the page rather than one more section.
                                Deep enough that --pink-text drops to 4.2:1,
                                so footer pinks use --pink-deep instead.    */

  /* --- Brand pink -------------------------------------------------------
     Three tints, split by JOB rather than by taste. The brand pink is only
     4.8:1 on cream and 4.6:1 on off-white — 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.8: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.1: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 carries ALL copy now. The client asked for no grey text anywhere,
     so leads, card body, captions and meta all use it. The two muted tones
     below survive for form placeholders only — see .field ::placeholder. */
  --ink:          #3A2A30;   /* every piece of text. 11.7:1 on the deepest   */
  --ink-soft:     #6B5A61;   /* retired from body copy                       */
  --ink-faint:    #756369;   /* placeholders only. 4.9:1 on --cream (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;
  /* Section headings: chancery italic — the "Monotype Corsiva" feel, but a
     real webfont that stays readable at full-sentence headline sizes. */
  --font-heading: 'EB Garamond', 'Monotype Corsiva', 'Apple Chancery', Georgia, 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;

  /* Tall enough for the logo (62px) plus the tagline line beneath it. */
  --nav-h: 96px;
}

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