/* trip.bamba.ci design system · base
   Reset, type roles, layout primitives. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  touch-action: manipulation;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--color-focus); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--color-danger); }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
s { color: var(--color-text-muted); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
::selection { background: var(--color-primary); color: var(--ink); }

/* ── Type roles ─────────────────────────────────────────── */
.t-display {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-display); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display); text-transform: uppercase;
}
.t-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-title); line-height: var(--leading-title); text-transform: uppercase;
}
.t-section {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-section); line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase;
}
.t-body { font-size: var(--text-body); font-weight: 500; line-height: var(--leading-body); }
.t-data { font-size: var(--text-data); font-weight: 700; font-variant-numeric: tabular-nums; }
.t-label {
  font-size: var(--text-label); font-weight: 700; line-height: 1.3;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted);
}
.t-caption { font-size: var(--text-caption); color: var(--color-text-muted); }
.t-note { font-family: var(--font-note); font-style: italic; font-size: 15px; line-height: 1.4; color: var(--color-text-muted); }
.t-muted { color: var(--color-text-muted); }
.t-accent { color: var(--color-danger); }

/* ── Icons ──────────────────────────────────────────────── */
.icon { width: var(--icon); height: var(--icon); flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--xs { width: 16px; height: 16px; }

/* ── Layout primitives ──────────────────────────────────── */
.stack   { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--tight { gap: var(--space-2); }
.stack--loose { gap: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.split   { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.grid-2  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.grid-3  { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.page    { padding: 0 var(--gutter); }
.screen  { min-height: 100dvh; padding-bottom: calc(var(--nav-h) + var(--space-6)); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Texture ─────────────────────────────────────────────── */
.halftone { background-image: var(--halftone); background-size: var(--halftone-size); }
.halftone--soft { opacity: 0.16; }