/* ==========================================================
   LOOPI THEME. Every colour on the site comes from here.
   Values match the app (mobile/src/theme/index.ts): warm
   off-white page, warm charcoal text, terracotta for actions,
   sand for the price tags and waitlist panel.
   ========================================================== */

:root {
  /* Page background and raised surfaces */
  --color-paper: #FAF8F5;        /* app: page */
  --color-surface: #FFFFFF;      /* inputs, panels */

  /* Text */
  --color-ink: #2A2522;          /* app: text */
  --color-muted: #6B645E;        /* app muted, nudged darker for small text on sand */
  --color-line: #E6E0D7;         /* app: border */

  /* Primary brand colour (buttons, links, step numbers) */
  --color-brand: #B4532A;        /* app: primary (terracotta) */
  --color-brand-hover: #9A4422;  /* app: primaryHover */
  --color-on-brand: #FFFFFF;

  /* Price tags and waitlist panel */
  --color-tag: #E9DCC8;          /* app: accent (sand) */
  --color-tag-deep: #D9B48A;     /* app: second logo ring; tag strings and holes */
  --color-on-tag: #2A2522;

  /* Feedback */
  --color-success: #2F6B4F;      /* app: success / buyer protection green */
  --color-error: #C4302B;        /* app: danger */
  --color-error-deep: #A3271F;   /* errors on the sand panel (contrast) */

  /* Focus ring */
  --color-focus: #B4532A;
}