/* HomeMeMade design tokens — import this before app.css and all component styles */

:root {
  /* ── Colors ─────────────────────────────────────────────────── */
  --color-primary:        #1B6B45;   /* Emerald green */
  --color-primary-mid:    #2D8A5E;   /* Emerald mid — banner gradient stop */
  --color-primary-bright: #4AAF7E;   /* Emerald bright — banner gradient stop */
  --color-primary-light:  #E4F2EB;   /* Emerald tint */

  --color-accent:         #2A7FC0;   /* Sky blue */
  --color-accent-light:   #E4F0F9;   /* Sky tint */

  --color-bg:             #F2F4F3;   /* Pearl — page background */
  --color-surface:        #FFFFFF;   /* Card / panel surface */
  --color-border:         #DDE8E2;   /* Subtle green-grey border */

  --color-text:           #111111;   /* Primary body text */
  --color-text-secondary: #555555;   /* Supporting text */
  --color-text-muted:     #888888;   /* Placeholders, captions */

  --color-sale:           #F7A800;   /* Amber — sale / discount badge */
  --color-sale-light:     #FFF8E6;   /* Amber tint — alert backgrounds */
  --color-danger:         #C0392B;   /* Red — errors, destructive actions */
  --color-delivery:       #7B3F7A;   /* Purple — "Out for delivery" status */

  /* ── Border radius ───────────────────────────────────────────── */
  --radius-card:          12px;      /* Cards, panels, modals */
  --radius-button:        20px;      /* Buttons, inputs, pills */
  --radius-badge:         4px;       /* Status badges, tags */

  /* ── Typography ──────────────────────────────────────────────── */
  --letter-spacing-logo:  -0.04em;   /* Bold wordmark tight tracking */
}