/* Design tokens for the rebuilt UI (FreshMart look: charcoal + fresh green + warm wood + sunny yellow). Every UI stylesheet uses these. */
:root {
  --bg-0: #0c0f0e;          /* app background / scrim base */
  --bg-1: #151a18;          /* panels */
  --bg-2: #1d2421;          /* cards */
  --bg-3: #27302c;          /* raised / hover */
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --ink: #f4f7f5;           /* primary text */
  --ink-2: #b8c4be;         /* secondary text */
  --ink-3: #7d8a84;         /* muted */
  --green: #3ccf5e;         /* brand / primary action */
  --green-d: #23a443;
  --green-ink: #06210f;
  --yellow: #ffc83d;        /* money, highlights */
  --wood: #b9773f;          /* bakery / warm accents */
  --blue: #2f7de1;          /* dairy / info */
  --red: #ef4d4d;           /* danger */
  --orange: #ff8a3d;        /* warnings */
  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 24px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-s: 0 3px 10px rgba(0, 0, 0, .35);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Archivo", "Inter", system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --tap: 44px;              /* minimum touch target */
  --gap: 12px;
}
@media (max-width: 600px), (max-height: 480px) { :root { --gap: 8px; --radius: 14px; --radius-l: 18px; } }