:root {
  /* ── Teal ramp — base is Benjamin Moore Dark Teal 2053-20 ───────────── */
  --teal-950: #0F272A;
  --teal-900: #143336;
  --teal-800: #1B4347;
  --teal-700: #255A5E; /* brand base — page background */
  --teal-600: #326F73;
  --teal-500: #4A8B8E;
  --teal-400: #6FAAAC;
  --teal-300: #9CC7C8;

  /* ── Cream ramp — the ink of the brand ──────────────────────────────── */
  --cream-50:  #FDF8F0;
  --cream-100: #F7EFE1;
  --cream-200: #EFE2CE;
  --cream-300: #DFCDB2;
  --cream-400: #C4AE91;

  /* ── Accents ───────────────────────────────────────────────────── */
  --sand-400:  #F6EEDC;
  --sand-500:  #EFE3C8; /* primary action */
  --sand-600:  #DCCBA5;
  --denim-400: #A8C6DA;
  --denim-500: #7FA6C4;
  --berry-400: #C5849B;
  --berry-500: #A5647C;
  --sage-400:    #B6D3BB;
  --sage-500:    #9CBFA4;
  --wheat-400:   #EBD3A0;
  --wheat-500:   #E3C27E;
  --plum-400:    #C7AAD4;

  /* ── Alpha veils (soft, flowy layering over teal) ───────────────────── */
  --veil-cream-04: rgba(253, 248, 240, 0.04);
  --veil-cream-08: rgba(253, 248, 240, 0.08);
  --veil-cream-14: rgba(253, 248, 240, 0.14);
  --veil-cream-24: rgba(253, 248, 240, 0.24);
  --veil-ink-16:   rgba(15, 39, 42, 0.16);

  /* ── Semantic: surfaces ─────────────────────────────────────────────── */
  --surface-page:      var(--teal-700);
  --surface-page-deep: var(--teal-900);
  --surface-card:      var(--veil-cream-08);
  --surface-card-hover:var(--veil-cream-14);
  --surface-raised:    var(--teal-600);
  --surface-cream:     var(--cream-50);
  --surface-chip:      var(--veil-cream-08);
  --surface-input:     var(--veil-cream-04);
  --surface-overlay:   rgba(15, 39, 42, 0.62);

  /* ── Semantic: text ─────────────────────────────────────────────────── */
  --text-body:      var(--cream-100);
  --text-strong:    var(--cream-50);
  --text-muted:     var(--cream-300);
  --text-quiet:     var(--cream-400);
  --text-accent:    var(--sand-500);
  --text-on-accent: var(--teal-900);
  --text-on-cream:  var(--teal-900);
  --text-on-cream-muted: #5B6E6F;

  /* ── Semantic: lines ────────────────────────────────────────────────── */
  --line-soft:   var(--veil-cream-08);
  --line-normal: var(--veil-cream-14);
  --line-strong: var(--veil-cream-24);
  --line-focus:  var(--sand-500);

  /* ── Semantic: actions ──────────────────────────────────────────────── */
  --action-primary:       var(--sand-500);
  --action-primary-hover: var(--sand-400);
  --action-primary-press: var(--sand-600);
  --action-primary-text:  var(--teal-900);
  --action-quiet-text:    var(--cream-100);

  /* ── Semantic: check-in statuses (from the prototype's status set) ──── */
  --status-in-stash:      var(--sage-500);
  --status-seen-at-store: var(--teal-300);
  --status-wishlist:      var(--berry-400);
  --status-used-up:       var(--cream-400);
  --status-destashed:     var(--denim-500);

  /* ── Semantic: project statuses ─────────────────────────────────────── */
  --status-planned:     var(--plum-400);
  --status-cast-on:     var(--teal-300);
  --status-in-progress: var(--wheat-500);
  --status-finished:    var(--sage-500);
  --status-frogged:     var(--berry-400);

  --feedback-danger:  #E98B84;
  --feedback-success: var(--sage-500);
}