/* ============================================================
   Localist EG — Color tokens
   Extracted from the brand swatch set (Red / Orange / Black /
   Light Gray / White). Red is the single hero color.
   ============================================================ */
:root {
  /* ---- Brand primitives ---- */
  --loc-red:          #e61f23;   /* primary — logo, CTAs, sale (RGB 230,31,35) */
  --loc-red-600:      #cc1a1d;   /* hover / pressed */
  --loc-red-700:      #a81416;   /* deep */
  --loc-red-100:      #fde4e4;   /* tint surface */
  --loc-red-50:       #fdf1f1;   /* faint wash */

  --loc-orange:       #ee7326;   /* secondary accent — highlights, hot tags (RGB 238,115,38) */
  --loc-orange-600:   #d5641b;
  --loc-orange-100:   #fdecdf;

  --loc-ink:          #3c3c3b;   /* charcoal — primary text, dark surfaces (RGB 60,60,59) */
  --loc-ink-900:      #1d1d1b;   /* near-black headings / footer (RGB 29,29,27) */
  --loc-ink-700:      #555555;
  --loc-ink-500:      #7a7a7a;   /* muted / secondary text */
  --loc-ink-400:      #9b9b9b;   /* placeholder */

  --loc-gray-200:     #e8e8e8;   /* light gray — borders, dividers, chips */
  --loc-gray-100:     #f1f1f1;   /* rails, hover fills */
  --loc-gray-50:      #f7f7f7;   /* page background wash */
  --loc-white:        #ffffff;

  --loc-success:      #2e9e5b;   /* in stock / order placed */
  --loc-success-100:  #e5f4ec;
  --loc-warning:      #ed7426;   /* low stock — reuses orange */
  --loc-star:         #f5a623;   /* rating stars (amber) */

  /* ---- Semantic aliases ---- */
  --color-primary:            var(--loc-red);
  --color-primary-hover:      var(--loc-red-600);
  --color-primary-active:     var(--loc-red-700);
  --color-primary-tint:       var(--loc-red-100);
  --color-accent:             var(--loc-orange);

  --text-heading:             var(--loc-ink-900);
  --text-body:                var(--loc-ink);
  --text-muted:               var(--loc-ink-500);
  --text-placeholder:         var(--loc-ink-400);
  --text-on-primary:          var(--loc-white);
  --text-price:               var(--loc-ink-900);
  --text-sale:                var(--loc-red);

  --surface-page:             var(--loc-gray-50);
  --surface-card:             var(--loc-white);
  --surface-raised:           var(--loc-white);
  --surface-inset:            var(--loc-gray-100);
  --surface-dark:             var(--loc-ink);

  --border-subtle:            var(--loc-gray-200);
  --border-strong:            #d4d4d4;
  --border-focus:             var(--loc-red);

  --price-strike:             var(--loc-ink-400);
}