/* WhereTo — Design System
 * Type: Instrument Serif (display) + Inter Tight (UI + label captions)
 * Palette: warm paper, ink, terracotta accent, muted neutrals
 */

/* PP Mori — used only inside the SVG logo wordmark ("here to") */
@font-face {
  font-family: 'PPMori-SemiBold';
  src: url('fonts/PPMori-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PP Mori';
  src: url('fonts/PPMori-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette:
     paper #f5f6f2 · ink #1a1a1d · accent #577da3 (dark dusty blue) ·
     dusty blue #8ba6c6 */

  /* Paper */
  --paper:        #f5f6f2;
  --paper-2:      #eceee6;   /* slight tint down for surface separation (olive warm) */
  --paper-3:      #dfe2d7;

  /* Ink */
  --ink:          #1a1a1d;
  --ink-2:        #3c3d42;
  --ink-3:        #6b6c72;
  --ink-4:        #577da3;       /* muted label color — dark dusty blue (text) */
  --hairline:     #d8d9d2;
  --hairline-2:   #c2c3bd;

  /* Accents — green (primary CTA) + royal blue (secondary) */
  --accent:       #577da3;            /* dark dusty blue (replaces olive green) */
  --accent-ink:   #3f5c7a;
  --accent-soft:  #d6e0ec;
  --accent-2:     #577da3;            /* aliased to main accent — royal blue removed from palette */
  --accent-2-ink: #3f5c7a;
  --accent-2-soft:#8ba6c6;            /* dusty blue — soft blue surface */

  /* Dark-section backgrounds — dusty blue from the palette (light, airy) */
  --ink-bg:       #8ba6c6;
  --ink-bg-2:     #7293b7;

  /* Type */
  --f-display: 'Instrument Serif', 'Tiempos Headline', Georgia, serif;
  --f-ui:      'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-mono:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

* { box-sizing: border-box; }

.wt {
  font-family: var(--f-ui);
  color: var(--ink);
  letter-spacing: -0.01em;    /* Figma kerning −10 on sans-serif (Inter Tight) */
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wt .serif { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.01em; }
.wt .mono  { font-family: var(--f-ui); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.wt .caps  { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 500; }
.wt .num   { font-variant-numeric: tabular-nums; }

/* Buttons */
.wt .btn {
  font-family: var(--f-ui);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .18s cubic-bezier(.2,.7,.3,1);
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.wt .btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.wt .btn-primary:hover { background: var(--accent-ink); }
.wt .btn-primary:disabled,
.wt .btn-primary[disabled] {
  background: var(--accent-2-soft);
  color: var(--paper);
  cursor: default;
}
.wt .btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-2);
}
.wt .btn-ghost:hover { background: var(--paper-2); }
.wt .btn-accent {
  background: var(--accent);
  color: var(--paper);
}
.wt .btn-accent:hover { filter: brightness(.95); }
.wt .btn-link {
  background: transparent; padding: 0; border: none;
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--hairline-2);
  text-underline-offset: 4px;
}
.wt .btn-link:hover { text-decoration-color: var(--ink); }

/* Chips */
.wt .chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  backdrop-filter: blur(8px);
}
.wt .chip-dark {
  background: rgba(20,16,12,.55);
  border-color: rgba(255,255,255,.15);
  color: rgba(255,255,255,.95);
}
.wt .chip-accent {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent-ink);
}

/* Hairlines */
.wt .hl { border-top: 1px solid var(--hairline); }
.wt .hl-b { border-bottom: 1px solid var(--hairline); }

/* Trip card photo placeholders — subtle diagonal stripes with caption */
.wt .photo {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}
.wt .photo-stripes {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 14px,
    rgba(0,0,0,.035) 14px 15px
  );
}
.wt .photo-caption {
  position: absolute; bottom: 10px; left: 10px;
  font-family: var(--f-ui);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(0,0,0,.35);
  text-transform: uppercase;
  font-weight: 500;
}

/* Photo tones — differentiate cards by hue while staying placeholder */
/* Photo tones — olive/sage greens + royal/deep blue only. Darker & desaturated
   so the placeholder blocks don't read as mustard/orange/lilac. */
.wt .photo-1  { background: linear-gradient(160deg, oklch(52% 0.080 140), oklch(32% 0.060 140)); }
.wt .photo-2  { background: linear-gradient(160deg, oklch(46% 0.140 255), oklch(28% 0.120 260)); }
.wt .photo-3  { background: linear-gradient(160deg, oklch(58% 0.070 145), oklch(36% 0.060 140)); }
.wt .photo-4  { background: linear-gradient(160deg, oklch(48% 0.075 150), oklch(30% 0.055 145)); }
.wt .photo-5  { background: linear-gradient(160deg, oklch(40% 0.130 260), oklch(24% 0.100 265)); }
.wt .photo-6  { background: linear-gradient(160deg, oklch(60% 0.080 140), oklch(38% 0.065 140)); }
.wt .photo-7  { background: linear-gradient(160deg, oklch(44% 0.135 255), oklch(28% 0.110 260)); }
.wt .photo-8  { background: linear-gradient(160deg, oklch(54% 0.080 145), oklch(34% 0.060 140)); }
.wt .photo-9  { background: linear-gradient(160deg, oklch(50% 0.070 145), oklch(30% 0.055 140)); }
.wt .photo-10 { background: linear-gradient(160deg, oklch(42% 0.130 258), oklch(26% 0.100 262)); }
.wt .photo-11 { background: linear-gradient(160deg, oklch(56% 0.080 142), oklch(36% 0.065 140)); }
.wt .photo-12 { background: linear-gradient(160deg, oklch(46% 0.110 255), oklch(30% 0.080 145)); }

/* Editorial dot divider */
.wt .dot {
  display: inline-block; width: 3px; height: 3px;
  background: currentColor; border-radius: 50%;
  vertical-align: middle; opacity: .5;
  margin: 0 8px;
}

/* Range slider (shared) */
.wt .slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px;
  background: var(--hairline-2);
  border-radius: 2px;
  outline: none;
}
.wt .slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
  border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.wt .slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink); cursor: pointer;
  border: 2px solid var(--paper);
}

/* Checkbox squares */
.wt .check {
  width: 16px; height: 16px;
  border: 1px solid var(--hairline-2);
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: #fff;
  flex-shrink: 0;
  transition: all .12s;
}
.wt .check.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Scroll */
.wt ::-webkit-scrollbar { width: 8px; height: 8px; }
.wt ::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 4px; }
.wt ::-webkit-scrollbar-track { background: transparent; }