/* Bongo Bongo Divers: shared look for the staff app, taken from the Webflow website
   and its trip planner forms (rates version 2026-09-26). Use these tokens; don't invent new colours. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap");

:root {
  /* colour */
  --ink: #0d313e;          /* website neutral primary: text, dark buttons, summary panel */
  --ink-deep: #082631;     /* website secondary: panel insets */
  --muted: #45616b;        /* secondary text */
  --line: #d3dfe2;         /* card borders */
  --line-strong: #6f8a93;  /* input borders */
  --soft: #eef4f5;         /* page ground, section headers */
  --card: #ffffff;
  --accent: #0b6f83;       /* links, focus, selected tiles */
  --accent-soft: #f2f9fa;  /* selected tile ground */
  --warn: #8a4b00;
  --panel-focus: #ffd166;  /* focus ring on the dark panel */

  /* type */
  --font-head: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  /* shape */
  --r-input: .5rem;   /* inputs and buttons */
  --r-tile: .75rem;   /* choice tiles */
  --r-card: 1rem;     /* cards */
  --r-chip: 2rem;     /* chips */
  --input-h: 2.9rem;  /* inputs: 1.5px border */
  --chip-h: 2.75rem;  /* tap targets on tablets */
}

/* Patterns from the planner forms
   - input: 1.5px solid var(--line-strong), radius var(--r-input), min-height var(--input-h)
   - button: radius var(--r-input), weight 600; dark = ink background, white text; ghost = white with ink border
   - card: radius var(--r-card), 1px var(--line) border, padding 1.5rem
   - choice tile selected: accent border + inset 0 0 0 1.5px accent shadow + var(--accent-soft) ground
   - chip: pill var(--r-chip), min-height var(--chip-h); selected = ink ground, white text
   - total panel: var(--ink) ground, white text, total in 1.9rem bold Poppins
   - focus: 3px outline var(--accent) (var(--panel-focus) on the dark panel) */