/* ============================================================
   Yellow Pages Malta — Color tokens
   Brand yellow #FFD800, charcoal #202020
   ============================================================ */
:root {
  /* ---- Brand primitives ---- */
  --yp-yellow-50:  #fff7db; /* brand guide tint */
  --yp-yellow-100: #ffeaa0; /* brand guide tint */
  --yp-yellow-200: #ffe970;
  --yp-yellow-300: #ffe12e;
  --yp-yellow-400: #ffd601; /* PRIMARY brand yellow (brand guide) */
  --yp-yellow-500: #f0c800;
  --yp-yellow-600: #d1ad00;
  --yp-yellow-700: #a88a00;

  /* ---- Charcoal / neutrals ---- */
  --yp-ink-900: #171717; /* deepest */
  --yp-ink-800: #222222; /* brand black (brand guide) */
  --yp-ink-700: #2e2e2e;
  --yp-ink-600: #4a4a4a;
  --yp-ink-500: #6b6b6b;
  --yp-ink-400: #949494;
  --yp-ink-300: #c4c4c4;
  --yp-ink-200: #e2e2e2;
  --yp-ink-150: #ececec;
  --yp-ink-100: #f4f4f4;
  --yp-ink-50:  #fafafa;
  --yp-white:   #ffffff;

  /* ---- Semantic status ---- */
  --yp-verified: #16a34a; /* verified badge green */
  --yp-verified-soft: #dcfce7;
  --yp-error:   #dc2626;
  --yp-error-soft: #fee2e2;
  --yp-info:    #2563eb;
  --yp-star:    #ffb100; /* review stars */

  /* ============================================================
     Semantic aliases — use these in components
     ============================================================ */
  --color-brand:            var(--yp-yellow-400);
  --color-brand-hover:      var(--yp-yellow-500);
  --color-brand-pressed:    var(--yp-yellow-600);
  --color-brand-soft:       var(--yp-yellow-50);
  --color-on-brand:         var(--yp-ink-800); /* text on yellow — always #222222 */

  --color-ink:              var(--yp-ink-800);
  --color-ink-strong:       var(--yp-ink-900);

  --text-heading:           var(--yp-ink-800);
  --text-body:              var(--yp-ink-700);
  --text-muted:             var(--yp-ink-500);
  --text-subtle:            var(--yp-ink-400);
  --text-on-dark:           var(--yp-white);
  --text-on-dark-muted:     var(--yp-ink-300);
  --text-link:              var(--yp-ink-800);

  --surface-page:           var(--yp-white);
  --surface-subtle:         var(--yp-ink-50);
  --surface-muted:          var(--yp-ink-100);
  --surface-card:           var(--yp-white);
  --surface-dark:           var(--yp-ink-800);
  --surface-inverse:        var(--yp-ink-900);

  --border-subtle:          var(--yp-ink-150);
  --border-default:         var(--yp-ink-200);
  --border-strong:          var(--yp-ink-300);
  --border-focus:           var(--yp-yellow-400);
}