/* ════════════════════════════════════════════════════════════
   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 (purple-navy) ─────────────────────────
     All dark-navy variants across files (#26377f, #1a4d8f,
     #1e3a8a, #2a3e92, #1565c0) are consolidated to these.   */
  --c-primary:               #3D3D97;   /* buttons, active states, links       */
  --c-primary-dark:          #271968;   /* mobile header, sidenav, deep accent */
  --c-primary-hover:         #2e2e7a;   /* button/link hover                   */
  --c-primary-mid:           #2d2d6b;   /* user toggle bg, account numbers     */
  --c-primary-lt:            #f4f5fb;   /* light purple bg panels              */
  --c-primary-lt2:           #ebebf8;   /* hover on light-purple elements      */
  --c-primary-border:        #d4d4f0;   /* light purple borders                */
  --c-primary-scroll:        #b0b0d8;   /* scrollbar thumb                     */
  --c-primary-scroll-track:  #f0f0f8;   /* scrollbar track                     */
  --c-primary-icon:          #8888cc;   /* muted purple for icons on white     */

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

  /* ── Accent (orange) ──────────────────────────────────── */
  --c-accent:                #F36C21;   /* CTA buttons, h1, promotions         */
  --c-accent-dark:           #c44602;   /* 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:             #1e1b4b;   /* 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:                    #ffffff;
  --c-bg-page:               #FAFAFA;   /* page / content area background      */
  --c-bg-light:              #f8fafc;   /* table rows, cards                   */
  --c-bg-subtle:             #f9fafb;   /* alternating rows, subtle panels     */
  --c-bg-purple-faint:       #f8f8ff;   /* very faint purple tint              */

  /* ── Navigation ─────────────────────────────────────────── */
  --c-menu:                  #636e68;   /* top-nav hover background            */
  --c-menu-dark:             #404843;   /* top-nav bottom border               */

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

  /* ── Status colours ──────────────────────────────────────── */
  --c-green:                 #339933;   /* general green                       */
  --c-green-vivid:           #108043;   /* product/stock vivid green           */
  --c-green-vivid-lt:        #e3f5e1;   /* vivid green light background        */
  --c-green-dark:            #065F46;   /* success dark                        */
  --c-green-lt:              #d1fae5;   /* success light background            */
  --c-red:                   #A50101;   /* 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:                  #ca8a04;   /* gold accents, rep chip text         */
  --c-gold-lt:               #fef9ec;   /* rep chip background                 */
  --c-gold-border:           #f5d87e;   /* rep chip border                     */
  --c-sky:                   #0ea5e9;   /* sky / accent blue                   */
  --c-indigo:                #4f46e5;   /* footer email link, sidebar active   */
  --c-indigo-lt:             #ede9fe;   /* sidebar panel hover bg              */
  --c-indigo-border:         #c4b5fd;   /* 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-vivid);
  --pl-green-bg:      var(--c-green-vivid-lt);
  --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:          #eef2ff;
  --pill-border:      #c7d2fe;
  --pill-text:        var(--c-primary);
  --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;
}