/* =========================================================
   tokens.css  —  Spice-market palette (same as live site)
   ========================================================= */
:root {
  /* Brand */
  --primary:        #A83232;
  --primary-soft:   #FDECEC;
  --primary-hover:  #93292A;
  --accent:         #E0A82E;
  --accent-soft:    #FBF1DA;
  --forest:         #2F5D3A;
  --forest-soft:    #E8F0E9;

  /* Surfaces */
  --bg:             #FAF4E8;
  --surface:        #FFFFFF;
  --surface-soft:   #FDF9F1;
  --topbar:         #FAF4E8;
  --sidebar:        #FFFFFF;
  --bottom:         #FFFFFF;

  /* Text */
  --ink:            #1F1B16;
  --ink-soft:       rgba(31, 27, 22, 0.72);
  --muted:          #7A6E63;
  --muted-soft:     #A89E92;
  --on-dark:        #FFFFFF;

  /* Borders */
  --border:         #E8E0D3;
  --border-soft:    #F0E8D8;

  /* Status */
  --danger:         #8B1A1A;
  --danger-soft:    #FBE9E9;
  --warn-text:      #9A6800;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(40, 22, 10, 0.04);
  --shadow-2: 0 4px 16px rgba(40, 22, 10, 0.06);
  --shadow-3: 0 12px 28px rgba(40, 22, 10, 0.10);
  --shadow-modal: 0 24px 60px rgba(40, 22, 10, 0.22);

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px;  --s-10: 40px;

  /* Radius */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px;
}