/* Direction: clean white travel marketplace — coral accent, rounded cards, Plus Jakarta Sans */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f7f7;
  --border: #e4e4e4;
  --border-strong: #bcb4b6;
  --ink: #222222;
  --muted: #6a6a6a;
  --accent: #e31c5f;
  --accent-hover: #c11851;
  --accent-ink: #ffffff;
  --accent-text: #c2134d;
  --accent-strong: #d11a57;
  --accent-soft: #fff0f4;
  --accent-border: #f299b7;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3f0e8;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6eae1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7e4e4;
  --danger-strong: #b91c1c;
  --chart-1: #e31c5f;
  --chart-2: #c68117;
  --chart-3: #4c7503;
  --chart-4: #1aa29c;
  --chart-5: #0d67ae;
  --chart-6: #c062fb;

  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --radius-card: 20px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --x-band: #1c1c1c;
  --x-on-photo: #ffffff;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #110307;
  --surface: #291c20;
  --surface-2: #1d1013;
  --border: #32262a;
  --border-strong: #584f51;
  --ink: #ffffff;
  --muted: #a09a9c;
  --accent: #e31c5f;
  --accent-hover: #e73e77;
  --accent-ink: #ffffff;
  --accent-text: #e94e83;
  --accent-strong: #e94e83;
  --accent-soft: #3f091a;
  --accent-border: #6f0e2f;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #121f13;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #351507;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #36090c;
  --danger-strong: #d16969;
  --chart-1: #e31c5f;
  --chart-2: #ce8824;
  --chart-3: #5f9200;
  --chart-4: #26a8a2;
  --chart-5: #1783dc;
  --chart-6: #c062fb;
}

.search-pill { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1); overflow: hidden; }
.search-pill:focus-within { border-color: var(--accent); }
.search-pill input, .search-pill select { color: var(--ink); }
.home-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.st { text-transform: capitalize; display: inline-flex; align-items: center; gap: 6px; }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--muted); }
.st-pending::before { background: var(--warning); }
.st-approved::before, .st-active::before { background: var(--success); }
.st-declined::before, .st-cancelled::before, .st-hidden::before { background: var(--danger); }
dialog.modal { max-width: 40rem; width: calc(100% - 2rem); max-height: 90vh; overflow-y: auto; }