/* HostEase design tokens — mirror these as Figma color & text styles after import */
:root {
  /* Color */
  --jade: #0E6B5A;          /* primary actions, selected states */
  --jade-deep: #0A4A3F;     /* pressed, headers on photos */
  --jade-wash: #E3F0EC;     /* selected chip / info surfaces */
  --marigold: #F4B03E;      /* key-tag prices, rating stars */
  --marigold-wash: #FDF1DA;
  --chalk: #F3F5F2;         /* app background */
  --paper: #FFFFFF;         /* cards, sheets */
  --ink: #15201D;           /* primary text */
  --slate: #5D6B66;         /* secondary text */
  --mist: #E2E9E5;          /* borders, dividers */
  --alert: #C8442F;         /* errors, held-for-review */
  --alert-wash: #FBE9E5;
  --scrim: rgba(21, 32, 29, 0.48);

  /* Type */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-ui: "Figtree", system-ui, sans-serif;
  --t-hero: 600 34px/40px var(--font-display);
  --t-title: 600 24px/30px var(--font-display);
  --t-heading: 600 18px/24px var(--font-display);
  --t-price: 700 20px/24px var(--font-display);
  --t-body: 400 15px/22px var(--font-ui);
  --t-body-strong: 600 15px/22px var(--font-ui);
  --t-small: 400 13px/18px var(--font-ui);
  --t-small-strong: 600 13px/18px var(--font-ui);
  --t-tiny: 500 11px/14px var(--font-ui);

  /* Spacing (8pt, with 4 for tight pairs) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;

  /* Radii: small controls < cards < sheets */
  --r-chip: 999px;
  --r-input: 12px;
  --r-card: 16px;
  --r-sheet: 24px;

  --frame-w: 390px;
  --frame-h: 844px;
}