/* Rio Travel — design tokens.
 *
 * Deep navy and charcoal carry the brand; warm white carries the reading;
 * champagne is an accent measured in hairlines and small marks, never a fill.
 * Photography does the aspirational work, so the type scale is confident
 * rather than enormous and every section has something in it.
 */
:root {
  /* ── Brand surfaces ──────────────────────────────────────── */
  --navy:        #0F1B2D;   /* hero, footer, dark sections */
  --navy-deep:   #0A1421;   /* overlays, scrims, modal */
  --charcoal:    #1C2431;   /* raised surface inside dark */
  --charcoal-2:  #273041;   /* borders on dark, hover fill */

  /* ── Light surfaces ──────────────────────────────────────── */
  --white-warm:  #FBF9F6;   /* default page background */
  --paper:       #FFFFFF;   /* cards */
  --stone:       #F1EDE7;   /* alternating band, image placeholder */

  /* ── Text ────────────────────────────────────────────────── */
  --ink:         #14203A;   /* headings on light — 13.9:1 on warm white */
  --ink-70:      #4A5568;   /* body on light — 7.4:1 */
  --ink-45:      #667085;   /* meta, captions — 4.7:1 on the page bg (was #78839A, 3.6:1) */
  --on-dark:     #F4F1EC;   /* text on navy — 14.6:1 */
  --on-dark-70:  #B9C1CE;   /* secondary on navy — 7.9:1 */

  /* ── Lines ───────────────────────────────────────────────── */
  --line:        #E4DFD6;
  --line-strong: #CFC7BA;
  --line-dark:   rgba(244, 241, 236, 0.16);

  /* ── Feedback ────────────────────────────────────────────── */
  /* The only non-brand hue on the site. Used for form errors and nothing else,
     so it never reads as decoration. 5.7:1 on its own wash. */
  --danger:      #B4462F;
  --danger-wash: rgba(180, 70, 47, 0.06);

  /* ── Accent: champagne, used sparingly ───────────────────── */
  --champagne:      #C8A96A;   /* accent on dark — 7.2:1 on navy */
  /* Measured on all three light grounds, not one: #8A6D33 was 4.63 on warm
     white, 4.87 on paper and 4.17 on stone — so the accent quietly failed in
     every stone band. The comment here used to claim 5.1:1, which was wrong.
     5.61 / 5.90 / 5.06. */
  --champagne-deep: #7E5F2C;
  --champagne-wash: rgba(200, 169, 106, 0.12);

  /* ── Semantic aliases — components read these only ───────── */
  --bg:        var(--white-warm);
  --surface:   var(--paper);
  --fg:        var(--ink);
  --fg-muted:  var(--ink-70);
  --fg-faint:  var(--ink-45);
  --rule:      var(--line);
  --accent:    var(--champagne-deep);
  --focus:     var(--ink);

  /* ── Type ────────────────────────────────────────────────── */
  --font-sans:  'Schibsted Grotesk', 'Schibsted Fallback', system-ui, -apple-system, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:  'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Confident, not billboard-sized. Hero tops out at 60px, headings at 40px:
     the photograph is the impact, the words are the message. */
  --fs-d1:    clamp(2.125rem, 1.35rem + 2.9vw, 3.75rem);   /* 34 → 60 */
  --fs-d2:    clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);    /* 28 → 44 */
  --fs-d3:    clamp(1.5rem, 1.20rem + 1.1vw, 2.125rem);    /* 24 → 34 */
  --fs-h3:    clamp(1.1875rem, 1.08rem + 0.45vw, 1.4375rem); /* 19 → 23 */
  --fs-h4:    1.0625rem;                                   /* 17 */
  --fs-lead:  clamp(1.0625rem, 1.01rem + 0.22vw, 1.1875rem); /* 17 → 19 */
  --fs-body:  1rem;                                        /* 16 */
  --fs-sm:    0.9375rem;                                   /* 15 */
  --fs-xs:    0.8125rem;                                   /* 13 */
  /* 12px is the floor for anything a person has to read or click. The label
     size carries the language switcher, footer headings and place captions;
     at 11px with 0.14em tracking they were legible but mean. */
  --fs-label: 0.75rem;                                     /* 12 */

  --lh-tight: 1.08;  --lh-head: 1.18;  --lh-body: 1.6;  --lh-long: 1.7;
  --tr-d1: -0.02em;  --tr-d2: -0.018em; --tr-d3: -0.012em;
  --tr-label: 0.14em; --tr-mono: 0.03em;

  /* ── Space ───────────────────────────────────────────────── */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 2.75rem; --s8: 4rem;
  --s9: 5.5rem;  --s10: 7rem;

  --section-y:    clamp(3.5rem, 2.2rem + 4.2vw, 6.5rem);
  --section-y-sm: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  --gutter:       clamp(1.25rem, 0.6rem + 2.4vw, 2.75rem);
  --w-content:    72.5rem;   /* 1160 */
  --w-wide:       88rem;
  --w-prose:      36rem;
  --header-h:     clamp(60px, 3.6vw, 74px);

  /* Cards are allowed here, with a real border and a quiet shadow. */
  --r-sm: 4px;  --r-md: 10px;  --r-lg: 14px;  --r-pill: 999px;
  --shadow-card:  0 1px 2px rgba(20, 32, 58, 0.05), 0 8px 24px -12px rgba(20, 32, 58, 0.18);
  --shadow-hover: 0 2px 4px rgba(20, 32, 58, 0.06), 0 18px 40px -18px rgba(20, 32, 58, 0.28);
  --shadow-overlay: 0 24px 64px -16px rgba(10, 20, 33, 0.45);

  /* ── Motion — restrained ─────────────────────────────────── */
  /* Interface transitions live between 120ms and 280ms. --d-enter is the one
     duration content is allowed to arrive on; --d-slow is reserved for the
     single authored moment on a page (the hero), never for section reveals. */
  --d-fast: 140ms;  --d-base: 220ms;  --d-slow: 450ms;
  --d-enter: 280ms;
  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --e-ui:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* The surfaces the browser draws for us still belong to the design system. */
::selection { background: var(--champagne-wash); color: var(--ink); }
:root { accent-color: var(--champagne-deep); caret-color: var(--ink); }
@supports (scrollbar-color: auto) {
  :root { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
}

/* Dark sections invert the aliases; components need to know nothing. */
.on-navy, .on-charcoal {
  --bg: var(--navy);
  --surface: var(--charcoal);
  --fg: var(--on-dark);
  --fg-muted: var(--on-dark-70);
  --fg-faint: var(--on-dark-70);
  --rule: var(--line-dark);
  --accent: var(--champagne);
  --focus: var(--champagne);
  background: var(--bg);
  color: var(--fg);
}
.on-charcoal { --bg: var(--charcoal); }
.on-navy ::selection, .on-charcoal ::selection { background: rgba(200, 169, 106, 0.3); color: var(--on-dark); }
.on-navy, .on-charcoal { caret-color: var(--on-dark); }

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-enter: 1ms; }
}