/* Beaches & Boats design tokens and base styles.
   The single source of truth for colour, type, radius and shadow. Copied verbatim from
   "Beaches & Boats MVP.html"; change values here, not in components. */

/* Page base the prototype was designed inside (safe areas, hidden attribute). */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: mobile-first marketplace (guest + host) with bottom tab bars; desktop-first admin with a dark blue sidebar. Tokens from the Beaches & Boats style sheets. */
:root{
  /* Brand colours from the logo: primary blue #0C4DB7, secondary yellow #FF9B00, third colour red #D64701.
     (Some component class names still say teal/sand; they now use these colours.) */
  --blue-50:#EAF1FC;--blue-200:#A8C4EE;--blue-500:#0C4DB7;--blue-700:#083A8C;--blue-900:#041F4D;
  --yellow-50:#FFF6E6;--yellow-200:#FFDBA3;--yellow-500:#FF9B00;--yellow-700:#B86F00;--yellow-900:#5C3700;
  --red-50:#FCEDE6;--red-500:#D64701;--red-700:#A33500;
  --white:#FFFFFF;--grey-50:#F5F5F5;--grey-300:#CCCCCC;--grey-500:#737373;--grey-700:#595959;
  --ink:#111111;--ink-2:#3D3D3D;--muted:#666666;--border:#E1E1DC;
  --success:#00BE57;--warning:#FD9521;--error:#F83D3E;--info:#1675F1;
  --error-ink:#C21E1F;--error-soft:#FFDCDC;--error-soft-hover:#FFC7C7;
  --success-bg:#E3F8EC;--warning-bg:#FFF1E2;--error-bg:#FDE4E4;--info-bg:#E5EFFE;--valid-bg:#EAF1FC;
  --r4:4px;--r8:8px;--r12:12px;--r16:16px;--r24:24px;--r32:32px;
  --f:"Google Sans Flex","Google Sans","Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* type scale 1.2 */
  --t11:.694rem;--t13:.833rem;--t16:1rem;--t19:1.2rem;--t23:1.44rem;--t28:1.728rem;--t33:2.074rem;--t40:2.488rem;--t48:2.986rem;
  --shadow:0 1px 2px rgba(4,31,77,.06),0 6px 20px rgba(4,31,77,.06);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--white);color:var(--ink);font-family:var(--f);font-size:var(--t16);line-height:1.5;margin:0}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{text-wrap:balance;letter-spacing:-.01em}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font:inherit;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;color:inherit}
svg{display:block}
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic.sm{width:16px;height:16px}.ic.lg{width:24px;height:24px}
.ic.fill{fill:currentColor;stroke:none}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:16px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.eyebrow{font-size:var(--t13);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-700);font-weight:600}
.h-xl{font-size:var(--t33);line-height:1.1;font-weight:700}
.h-l{font-size:var(--t28);line-height:1.15;font-weight:700}
.h-m{font-size:var(--t23);line-height:1.2;font-weight:700}
.h-s{font-size:var(--t19);line-height:1.3;font-weight:600}
.lead{font-size:var(--t19);color:var(--muted);max-width:60ch}
.small{font-size:var(--t13)}
.tiny{font-size:var(--t11)}
@media (min-width:900px){.h-xl{font-size:var(--t48)}.h-l{font-size:var(--t33)}.h-m{font-size:var(--t28)}}
:focus-visible{outline:3px solid var(--blue-200);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}