/* LOCLbox global stylesheet — design system from mockups:
   cream #f8f7f2, charcoal #2a2a2a, Inter body / Outfit display / Cabin logo,
   1rem–1.5rem card radius, 9999px pills, glass rgba(255,255,255,.8) blur(12px).
   Page-specific CSS ports in with each mockup during Phase 1. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* The hidden attribute must always win. Author display rules (e.g. a class with
   display:flex) otherwise override the UA's [hidden] display:none — which is how
   the PWA install banner leaked onto iOS with a dead Install button. */
[hidden] { display: none !important; }

:root {
  --primary: #2a2a2a;
  --secondary: #3a3a3a;
  --cream: #f8f7f2;
  --admin-accent: #3b82f6;
  --radius-card: 1.25rem;
  --radius-pill: 9999px;
  --glass: rgba(255, 255, 255, 0.8);
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--cream);
  color: var(--primary);
  -webkit-font-smoothing: antialiased;
}

/* Brand-consistent form controls everywhere (checkboxes/radios) — no default blue. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }