Theming

/* packages/zostel-ui-src/styles/tokens.css (globals.css imports it) — Tailwind v4 makes a utility of every token */
@theme {
  --color-zostel-orange: #F1563F;   /* bg-zostel-orange, text-zostel-orange… */
  --color-zostel-grey: #43474B;
  --color-zostel-beige: #F0EDDE;
  --color-zostel-orange-ink: #D83D28;        /* orange text on white, white text on orange */
  --color-zostel-orange-ink-beige: #C92E19;  /* orange text on Beige */
  --color-zostel-muted: #606468;              /* soft text */
  --color-field-edge: #606468;                /* a field's edge (border-field-edge): 3:1 by day; beiges.k40 under .dark */
  --color-sunny-1: #FAA619;          /* …sunny-2, water-1…3, field-1…3, flower-1…3, valley-1…3 */

  /* semantic colours the primitives use (shadcn names) */
  --color-background: #F0EDDE;  --color-foreground: #43474B;
  --color-primary: #D83D28;     --color-primary-foreground: #FFFFFF;   /* orange-ink: AA under white text */
  --color-secondary: #43474B;   --color-destructive: #E03022;

  --font-heading: 'Futura', 'Jost', 'Verdana', sans-serif;
  --font-sans: 'Gotham Narrow', 'Futura', 'Verdana', sans-serif;
  --text-2xs: 0.6875rem;  /* text-2xs: 11 px, the small label over a value (Check-in, Guests) */
}

/* the page's measures, plain variables: your header's height (what sticky parts pin under), and how much of the
   screen a fixed BookingBar covers (it writes this; base.css gives it to scroll-padding-bottom) */
:root { --header-h: 4rem; --booking-bar-h: 0px; }

/* night: the same names, new values, under .dark (useTheme / DarkModeToggle set the class) */
.dark {
  --color-background: #43474B;
  --color-foreground: #F0EDDE;
}