/* ============================================================================
 * TourWidgets — shared theme tokens + baseline.
 *
 * Source: Claude Design project — "TourWidgets logo and style guide"
 *   https://claude.ai/design/p/de2045da-e797-4eb1-9a08-2ff7b95e6bce
 *   File:  TourWidgets Style Guide.dc.html
 *
 * One shared file for admin (apps/admin), booking (apps/booking), and the
 * embeddable widget (packages/widget-src). Do NOT fork per-surface. The
 * whole brand is one loud coral, one quiet azure, warm ink on warm paper —
 * that discipline is what makes it read as one product.
 *
 * Custom properties on :root inherit across Shadow DOM boundaries, so the
 * widget picks these up as long as the host page has loaded this file.
 * ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Colour: brand ---------- */
  --tw-coral:            #FF6A3D;  /* Waypoint Coral — primary CTA + route + booking dot */
  --tw-coral-deep:       #E14E22;  /* coral hover / active + accent copy */
  --tw-coral-tint:       #FDECE4;  /* coral chip background */
  --tw-azure:            #1FA9E0;  /* Coast Azure — SUPPORT ONLY. Links, info states, data. Never competes with coral. */
  --tw-azure-deep:       #1580B4;  /* azure link default */
  --tw-azure-tint:       #EAF6FC;  /* azure chip background */
  --tw-azure-tint-line:  #CDE9F6;  /* azure tint border */

  /* ---------- Colour: neutrals ---------- */
  --tw-ink:              #171A24;  /* primary text, headings */
  --tw-ink-soft:         #3A3F4D;  /* body copy secondary */
  --tw-muted:            #6B6F7A;  /* meta labels, muted UI text */
  --tw-muted-soft:       #8A8F9A;  /* footer text, hint captions on dark */
  --tw-paper:            #FAF8F4;  /* page background — warm cream */
  --tw-line:             #E7E3DB;  /* card + field border */
  --tw-line-soft:        #F1EDE5;  /* subtle dividers inside cards */
  --tw-line-strong:      #C9C4B9;  /* dashed markers, secondary borders */
  --tw-grid-line:        #EFEBE2;  /* grid backdrop (cover / hero) */
  --tw-surface:          #FFFFFF;  /* card / panel surface */

  /* ---------- Typography: families ---------- */
  --tw-font-display:     'Familjen Grotesk', system-ui, sans-serif;      /* headings + display */
  --tw-font-body:        'Hanken Grotesk', system-ui, sans-serif;        /* body + UI */
  --tw-font-mono:        'IBM Plex Mono', ui-monospace, monospace;       /* labels + code + embed */

  /* ---------- Typography: scale ---------- */
  --tw-size-display:     76px;
  --tw-size-h1:          52px;
  --tw-size-h2:          40px;
  --tw-size-h3:          26px;
  --tw-size-h4:          20px;
  --tw-size-body-lg:     20px;
  --tw-size-body:        18px;
  --tw-size-body-sm:     15px;
  --tw-size-caption:     14px;
  --tw-size-label:       12px;

  /* ---------- Typography: weight + tracking ---------- */
  --tw-weight-display:   700;
  --tw-weight-heading:   600;
  --tw-weight-body:      400;
  --tw-weight-strong:    600;
  --tw-track-display:    -.03em;
  --tw-track-heading:    -.02em;
  --tw-track-label:      .16em;

  /* ---------- Radii ---------- */
  --tw-radius-panel:     20px;     /* large cards / hero panels */
  --tw-radius-card:      16px;     /* small cards */
  --tw-radius-field:     12px;     /* buttons, inputs */
  --tw-radius-pill:      999px;    /* chips */

  /* ---------- Spacing ---------- */
  --tw-space-section:    96px;     /* section vertical padding */
  --tw-space-panel:      48px;     /* panel inner padding */
  --tw-space-tight:      12px;

  /* ---------- Elevation ---------- */
  --tw-shadow-soft:      0 20px 40px -24px rgba(23, 26, 36, .25);
}

/* ---------- Baseline reset + type defaults ---------- */
*,
*::before,
*::after         { box-sizing: border-box; }
html             { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin:        0;
  background:    var(--tw-paper);
  color:         var(--tw-ink);
  font-family:   var(--tw-font-body);
  font-size:     var(--tw-size-body);
  line-height:   1.5;
}
a                { color: var(--tw-azure-deep); text-decoration: none; }
a:hover          { color: var(--tw-coral-deep); }
::selection      { background: var(--tw-coral); color: #fff; }

h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4   { font-family: var(--tw-font-display); color: var(--tw-ink); }
h1               { font-weight: var(--tw-weight-display); font-size: var(--tw-size-h1); letter-spacing: var(--tw-track-display); line-height: 1.02; }
h2               { font-weight: var(--tw-weight-heading); font-size: var(--tw-size-h2); letter-spacing: var(--tw-track-heading); line-height: 1.08; }
h3               { font-weight: var(--tw-weight-heading); font-size: var(--tw-size-h3); letter-spacing: var(--tw-track-heading); line-height: 1.15; }
h4               { font-weight: var(--tw-weight-heading); font-size: var(--tw-size-h4); line-height: 1.2; }

/* ---------- Component: buttons ---------- */
.tw-btn-primary {
  border:        0;
  background:    var(--tw-coral);
  color:         #fff;
  font-family:   var(--tw-font-body);
  font-weight:   var(--tw-weight-heading);
  font-size:     14px;
  padding:       12px 20px;
  border-radius: var(--tw-radius-field);
  cursor:        pointer;
}
.tw-btn-primary:hover { background: var(--tw-coral-deep); }

.tw-btn-secondary {
  background:    var(--tw-surface);
  color:         var(--tw-ink);
  border:        1px solid var(--tw-ink);
  font-family:   var(--tw-font-body);
  font-weight:   var(--tw-weight-heading);
  font-size:     14px;
  padding:       12px 20px;
  border-radius: var(--tw-radius-field);
  cursor:        pointer;
}

/* ---------- Component: chips (small pill labels) ---------- */
.tw-chip {
  display:       inline-block;
  font-family:   var(--tw-font-mono);
  font-size:     11px;
  border-radius: var(--tw-radius-pill);
  padding:       8px 14px;
}
.tw-chip-coral   { background: var(--tw-coral-tint); color: var(--tw-coral-deep); }
.tw-chip-azure   { background: var(--tw-azure-tint); color: var(--tw-azure-deep); }

/* ---------- Component: label (uppercase mono meta) ---------- */
.tw-label {
  font-family:   var(--tw-font-mono);
  font-size:     var(--tw-size-label);
  letter-spacing:var(--tw-track-label);
  text-transform:uppercase;
  color:         var(--tw-muted);
}

/* ---------- Component: card + panel surfaces ---------- */
.tw-panel        { background: var(--tw-surface); border: 1px solid var(--tw-line); border-radius: var(--tw-radius-panel); }
.tw-card         { background: var(--tw-surface); border: 1px solid var(--tw-line); border-radius: var(--tw-radius-card); }
.tw-elevate      { box-shadow: var(--tw-shadow-soft); }

/* ---------- Voice + tone (as a comment for future writers) ----------
 *   PLAIN — no jargon, no travel-brochure adjectives.
 *   CONFIDENT — active voice, short sentences, no "please wait".
 *   ROUTE LANGUAGE — stops, legs, the whole trip, one go.
 *
 *   WE SAY:  "Six stops. One trip. One payment."
 *   WE DO NOT SAY:  "Unlock unforgettable journeys of a lifetime."
 * -------------------------------------------------------------- */

/* ---------- TODO: logo mark ----------
 *   The Mark component lives in the Claude Design project as
 *   Mark.dc.html (a dc-import). The final SVG source needs to be
 *   extracted (or exported from the design tool) and dropped in as
 *   packages/logo/mark-coral.svg + mark-mono.svg + mark-paper.svg
 *   with a wrapper element that switches via a data-variant attribute.
 *   Minimum size: full mark down to ~40px wide; below that switch to
 *   the compact 3-stop version (favicon-sized).
 * -------------------------------------------------------------- */