/* ════════════════════════════════════════════════════════════
   colors.css — Centralised colour tokens for the entire site.
   Edit values here to retheme everything in one place.
   Loaded first in header.php, before all other stylesheets.
   ════════════════════════════════════════════════════════════ */
:root {

  /* ── Primary brand (terracotta/coral) ──────────────────────
     Consolidated base anchor: #e00234 */
  --c-primary:              #e00234;   /* buttons, active states, links        */
  --c-secondary:            #e00234;   /* secondary accent                     */
  --c-primary-dark:         #275883;   /* mobile header, sidenav, deep accent  */
  --c-primary-hover:        #e00234;   /* button/link hover                    */
  --c-primary-mid:          #E2817C;   /* user toggle bg, account numbers      */
  --c-primary-lt:           #E6F0FA;   /* light brand bg panels                */
  --c-primary-lt2:          #FBEBEA;   /* hover on light brand elements        */
  --c-primary-border:       #e00234;   /* light brand borders                  */
  --c-primary-scroll:       #E2A29F;   /* scrollbar thumb                      */
  --c-primary-scroll-track: #FBF0EF;   /* scrollbar track                      */
  --c-primary-icon:         #e00234;   /* muted brand for icons on white       */

  /* ── Blue accent (icons, badges — kept distinct from brand) */
  --c-blue:                 #7AA0CD;   /* icon/badge blue                      */
  --c-blue-lt:              #dbeafe;   /* icon/badge light-blue background     */

  /* ── Accent (warm coral/amber CTA) ─────────────────────── */
  --c-accent:               #E06D53;   /* CTA buttons, h1, promotions          */
  --c-accent-dark:          #C25138;   /* accent button shadow/border          */

  /* ── Text hierarchy ────────────────────────────────────── */
  --c-text:                 #374151;   /* primary body text                    */
  --c-text-mid:             #4b5563;   /* secondary body text                  */
  --c-text-muted:           #6b7280;   /* captions, helper labels              */
  --c-text-subtle:          #9ca3af;   /* placeholders, hints                  */
  --c-text-dark:            #111827;   /* strong headings                      */
  --c-text-on-dark:         #ffffff;   /* text on coloured backgrounds         */
  --c-text-ink:             #111827;   /* near-black body text                 */

  /* ── Borders & dividers ─────────────────────────────────── */
  --c-border:               #e5e7eb;   /* standard borders                     */
  --c-border-mid:           #d0d5dd;   /* input / control borders              */
  --c-border-light:         #f0f0f5;   /* subtle row / section dividers        */

  /* ── Backgrounds ────────────────────────────────────────── */
  --c-bg:                   #FFFFFD;
  --c-bg-page:              #FFFFFD;   /* page / content area background       */
  --c-bg-light:             #f8fafc;   /* table rows, cards                    */
  --c-bg-subtle:            #f9fafb;   /* alternating rows, subtle panels      */
  --c-bg-purple-faint:      #FDF8F8;   /* faint brand tint background          */

  /* ── Navigation ─────────────────────────────────────────── */
  --c-menu:                 #475569;   /* top-nav hover background             */
  --c-menu-dark:            #334155;   /* top-nav bottom border                */

  /* ── Data tables ─────────────────────────────────────────── */
  --c-table-head-bg:        var(--c-primary);
  --c-table-head-text:      #ffffff;

  /* ── Status colours ──────────────────────────────────────── */
  --c-green:                #76AB77;   /* general green                        */
  --c-green-vivid:          #0D3E34;   /* product/stock vivid green            */
  --c-green-vivid-lt:       #e3f5e1;   /* vivid green light background         */
  --c-green-dark:           #0D3E34;   /* success dark                         */
  --c-green-lt:             #d1fae5;   /* success light background             */
  --c-red:                  #EB5331;   /* toggle-checked / deep error          */
  --c-red-dark:             #991B1B;   /* danger dark                          */
  --c-red-lt:               #fee2e2;   /* danger light background              */
  --c-danger:               #ef4444;   /* standard danger / error red          */
  --c-error:                #c0392b;   /* logout / destructive action red      */
  --c-amber:                #f59e0b;   /* warning amber                        */
  --c-amber-dark:           #d97706;   /* darker amber                         */
  --c-gold:                 #97C63D;   /* gold accents, rep chip text          */
  --c-gold-lt:              #fef9ec;   /* rep chip background                  */
  --c-gold-border:          #97C63D;   /* rep chip border                      */
  --c-sky:                  #0ea5e9;   /* sky / accent blue                    */
  --c-indigo:               #B0423C;   /* footer email link, sidebar active    */
  --c-indigo-lt:            #FBEBEA;   /* sidebar panel hover bg               */
  --c-indigo-border:        #F4C3C0;   /* footer email border                  */

  /* ════ File-level aliases ═══════════════════════════════
     These let each file keep its own var() names while all
     colour values resolve from the tokens above.
     ════════════════════════════════════════════════════════ */

  /* home.css */
  --h-accent:               var(--c-primary);
  --h-accent-dark:          var(--c-primary-hover);
  --h-green:                var(--c-green-vivid);
  --h-green-lt:             var(--c-green-vivid-lt);
  --h-surface:              var(--c-bg);
  --h-bg:                   var(--c-bg-subtle);
  --h-border:               var(--c-border);
  --h-text:                 var(--c-text-ink);
  --h-muted:                var(--c-text-muted);

  /* product-list.css */
  --pl-accent:              var(--c-primary);
  --pl-accent-hover:        var(--c-primary-hover);
  --pl-green:               var(--c-green);
  --pl-green-bg:            var(--c-green-vivid);
  --pl-red:                 #de3618;            /* product OOS red — intentionally distinct */
  --pl-primary:             var(--c-primary);
  --pl-primary-dark:        var(--c-primary-hover);
  --pl-surface:             var(--c-bg);
  --pl-bg:                  var(--c-bg-subtle);
  --pl-border:              var(--c-border-mid);
  --pl-text:                #212b36;            /* near-black product text                  */
  --pl-text-muted:          var(--c-text-muted);

  /* order_list.css */
  --bg:                     var(--c-bg-light);
  --card:                   var(--c-bg);
  --ink:                    var(--c-text-ink);
  --muted:                  var(--c-text-muted);
  --border:                 var(--c-border);
  --ok:                     var(--c-green-vivid);
  --no:                     var(--c-danger);
  --primary:                var(--c-primary);
  --accent:                 var(--c-sky);
  --pill-bg:                var(--c-primary-lt2);
  --pill-border:            var(--c-primary-border);
  --pill-text:              var(--c-primary-dark);
  --bubble-bg:              #fef3c7;
  --bubble-border:          var(--c-amber);
  --bubble-text:            #7c2d12;
  --brand:                  var(--c-primary-dark);

  /* user_code.css */
  --primary-blue:           var(--c-primary-dark);
  --border-color:           var(--c-border);
  --text-dark:              var(--c-text-ink);
  --text-muted:             var(--c-text-muted);
  --bg-light:               var(--c-bg-subtle);

  /* payment.css — fixes previously undefined variable */
  --primary-color:          var(--c-primary);

  /* transactions.css */
  --tx-white:               var(--c-bg);
  --tx-bg:                  var(--c-bg-light);
  --tx-border:              var(--c-border);
  --tx-border-lt:           var(--c-border-light);
  --tx-slate-50:            var(--c-bg-light);
  --tx-slate-100:           var(--c-bg-subtle);
  --tx-slate-400:           var(--c-text-subtle);
  --tx-slate-500:           var(--c-text-muted);
  --tx-slate-600:           var(--c-text-mid);
  --tx-slate-800:           #1e293b;
  --tx-slate-900:           #0f172a;
  --tx-blue-50:             #eff6ff;
  --tx-blue-100:            var(--c-blue-lt);
  --tx-blue-600:            var(--c-primary);
  --tx-blue-700:            var(--c-blue);
  --tx-amber-100:           #fef3c7;
  --tx-amber-600:           var(--c-amber-dark);
  --tx-amber-700:           #b45309;
  --tx-rose-100:            #ffe4e6;
  --tx-rose-600:            #e11d48;
  --tx-yellow-50:           #fffbeb;
  --tx-yellow-100:          #fef3c7;
  --tx-emerald-100:         var(--c-green-lt);
  --tx-emerald-700:         var(--c-green-dark);
  --tx-rose-700:            #be123c;
}