/* ============================================================
   Craveva — Color tokens
   Warm, earthy, vintage-kitchen palette built around the two
   brand colors: Brown #5B4F42 and Olive #857C5D.
   ============================================================ */

:root {
  /* ---- Brand core (from brand guidelines) ---- */
  --craveva-brown: #5B4F42;   /* primary */
  --craveva-olive: #857C5D;   /* mono / secondary */

  /* ---- Brown scale (warm taupe) ---- */
  --brown-50:  #F3F0EB;
  --brown-100: #E4DDD3;
  --brown-200: #C9BFB1;
  --brown-300: #AB9F8D;
  --brown-400: #8B7E6B;
  --brown-500: #6F6151;
  --brown-600: #5B4F42;  /* brand brown */
  --brown-700: #493F35;
  --brown-800: #382F28;
  --brown-900: #25201B;

  /* ---- Olive scale (sage khaki) ---- */
  --olive-50:  #F3F2EB;
  --olive-100: #E6E3D4;
  --olive-200: #D0CAB2;
  --olive-300: #B4AC8B;
  --olive-400: #9C9270;
  --olive-500: #857C5D;  /* brand olive */
  --olive-600: #6E6649;
  --olive-700: #575139;
  --olive-800: #413D2C;
  --olive-900: #2C291E;

  /* ---- Cream / paper neutrals (warm) ---- */
  --cream-50:  #FFFCF6;  /* card / surface */
  --cream-100: #FAF5EB;
  --cream-200: #F4EEE1;  /* page */
  --cream-300: #ECE3D2;
  --cream-400: #E0D4BF;

  /* ---- Accent: Paprika amber (appetite / CTA) ---- */
  --amber-100: #F6E2C8;
  --amber-300: #E6A14B;
  --amber-500: #C9742E;  /* primary accent */
  --amber-700: #A1571E;
  --amber-900: #6F3B14;

  /* ---- Semantic hues (warm, on-brand) ---- */
  --herb-500:    #5E7146;  /* success / fresh / veg */
  --herb-100:    #E2E6D4;
  --paprika-500: #B04A36;  /* danger / spicy */
  --paprika-100: #F3DAD2;
  --honey-500:   #D69A2D;  /* warning */
  --honey-100:   #F7E9C7;
  --slate-500:   #5B6E78;  /* info */
  --slate-100:   #DCE4E6;

  /* ============================================================
     Semantic aliases — reference these in product code
     ============================================================ */

  /* Surfaces & backgrounds */
  --bg-page:           var(--cream-200);
  --bg-surface:        var(--cream-50);
  --bg-surface-sunken: var(--cream-300);
  --bg-surface-hover:  var(--cream-100);
  --bg-inverse:        var(--brown-900);
  --bg-brand:          var(--brown-600);
  --bg-brand-soft:     var(--brown-50);
  --bg-olive:          var(--olive-500);
  --bg-olive-soft:     var(--olive-50);
  --bg-accent:         var(--amber-500);
  --bg-accent-soft:    var(--amber-100);

  /* Text */
  --text-primary:   #342D26;          /* near-brown ink */
  --text-secondary: var(--brown-500);
  --text-muted:     var(--brown-400);
  --text-brand:     var(--brown-600);
  --text-olive:     var(--olive-600);
  --text-accent:    var(--amber-700);
  --text-on-brand:  var(--cream-100);
  --text-on-accent: #FFFCF6;
  --text-inverse:   var(--cream-100);

  /* Borders */
  --border-subtle:  var(--cream-400);
  --border-default: #D8CDB9;
  --border-strong:  var(--brown-300);
  --border-brand:   var(--brown-600);

  /* Feedback */
  --color-success: var(--herb-500);
  --color-success-soft: var(--herb-100);
  --color-warning: var(--honey-500);
  --color-warning-soft: var(--honey-100);
  --color-danger:  var(--paprika-500);
  --color-danger-soft:  var(--paprika-100);
  --color-info:    var(--slate-500);
  --color-info-soft:    var(--slate-100);

  /* Focus ring */
  --ring-accent: 0 0 0 3px rgba(201, 116, 46, 0.34);
  --ring-brand:  0 0 0 3px rgba(91, 79, 66, 0.28);
}