/* ============================================================
   Control Suite — Design Tokens
   Single source of truth for all UI decisions.
   This file is excluded from SVN.
   ============================================================ */

:root {

  /* ---- Brand ---- */
  --brand:          #099267;
  --brand-hover:    #077a56;
  --brand-pale:     #E1F5EE;
  --brand-deep:     #1E2D2A;

  /* ---- Neutrals ---- */
  --charcoal:       #1E2D2A;
  --slate:          #3D3D3A;
  --mid:            #5F5E5A;
  --muted:          #888780;
  --light:          #B4B2A9;
  --lighter:        #C2C0B6;
  --offwhite:       #F4F3EF;
  --surface:        #F9F8F5;
  --border:         #D3D1C7;
  --border-pale:    #E8E7E1;
  --border-faint:   #F0EFE9;
  --white:          #FFFFFF;

  /* ---- Semantic ---- */
  --danger:         #E24B4A;
  --warning:        #EF9F27;
  --info:           #185FA5;

  /* ---- Avatars ---- */
  --avatar-blue:    #185FA5;
  --avatar-purple:  #533AB7;
  --avatar-green:   #099267;
  --avatar-dk-green:#0F6E56;
  --avatar-amber:   #BA7517;
  --avatar-pink:    #993556;
  --avatar-brown:   #854F0B;

  /* ---- Membership / Badges ---- */
  --member-bg:      #E1F5EE;  --member-text:    #0F6E56;
  --vip-bg:         #EEEDFE;  --vip-text:       #3C3489;
  --untagged-bg:    #F1EFE8;  --untagged-text:  #B4B2A9;
  --pending-bg:     #FAEEDA;  --pending-text:   #854F0B;
  --sms-bg:         #E6F1FB;  --sms-text:       #185FA5;

  /* ---- Leaderboard ---- */
  --rank1-bg:       #099267;  --rank1-text:     #FFFFFF;
  --rank2-bg:       #5F5E5A;  --rank2-text:     #FFFFFF;
  --rank3-bg:       #B4B2A9;  --rank3-text:     #FFFFFF;
  --rankn-bg:       #F1EFE8;  --rankn-text:     #888780;

  /* ---- Typography ---- */
  --font:           Arial, 'Segoe UI', sans-serif;
  --font-mono:      'Courier New', monospace;
  --fw-normal:      400;
  --fw-semibold:    600;
  --fw-bold:        700;

  --fs-badge:       9px;
  --fs-caption:     10px;
  --fs-small:       11px;
  --fs-body:        12px;
  --fs-section-h2:  14px;
  --fs-page-title:  17px;
  --fs-stat-value:  20px;

  /* ---- Spacing (base-4) ---- */
  --sp-1:           4px;
  --sp-2:           8px;
  --sp-3:           12px;
  --sp-4:           16px;
  --sp-5:           20px;
  --sp-6:           24px;
  --page-padding:   22px;
  --card-padding-y: 14px;
  --card-padding-x: 16px;
  --cell-padding-y: 10px;
  --cell-padding-x: 16px;
  --header-padding-y: 11px;
  --header-padding-x: 16px;

  /* ---- Border Radius ---- */
  --radius-sm:      5px;
  --radius-md:      6px;
  --radius-lg:      8px;
  --radius-card:    10px;
  --radius-shell:   12px;
  --radius-pill:    999px;
  --radius-circle:  50%;

  /* ---- Borders ---- */
  --border-width:   0.5px;
  --border-default: 0.5px solid #D3D1C7;
  --border-pale-line: 0.5px solid #E8E7E1;
  --border-faint-line: 0.5px solid #F0EFE9;
  --border-focus:   0.5px solid #099267;
  --border-accent:  2px solid #9FE1CB;

  /* ---- Layout ---- */
  --sidebar-w:      220px;
  --topbar-h:       48px;
  --app-bg:         #F4F3EF;
  --card-gap:       14px;
  --grid-gap:       10px;

  /* ---- Components ---- */
  --btn-h:          26px;
  --btn-h-add:      30px;
  --input-h:        30px;
  --icon-nav:       14px;
  --icon-inline:    12px;
  --icon-stroke:    1.3px;

  /* ---- EPOS ---- */
  --epos-cat-sidebar: 168px;
  --epos-order-panel: 240px;
  --epos-product-cols: 4;
  --epos-product-gap: 8px;
  --epos-charge-h:  44px;

  /* ---- EPOS Dark Theme ---- */
  --epos-bg:            #1a1d23;
  --epos-surface:       #22262e;
  --epos-surface-light: #2a2f38;
  --epos-surface-hover: #323840;
  --epos-panel:         #181b20;
  --epos-header:        #15171c;
  --epos-text:          #e8e8e8;
  --epos-text-secondary:#adb0b8;
  --epos-text-muted:    #6b6f78;
  --epos-border:        #2d3139;
  --epos-border-light:  #383d47;
  --epos-accent:        #099267;
  --epos-accent-hover:  #22b888;
  --epos-accent-bg:     rgba(9, 146, 103, 0.15);
  --epos-danger:        #e74c3c;
  --epos-danger-bg:     rgba(231, 76, 60, 0.2);
  --epos-success:       #2ecc71;
  --epos-success-bg:    rgba(46, 204, 113, 0.15);
  --epos-btn-mix:       white;
  --epos-btn-mix-stock: rgba(255,255,255,0.6);

  /* ---- Motion ---- */
  --transition-fast:    0.1s;
  --transition-default: 0.15s;
}

/* ---- EPOS Light Theme ---- */
body.epos-light {
  --epos-bg:            #f0f2f5;
  --epos-surface:       #ffffff;
  --epos-surface-light: #f5f6f8;
  --epos-surface-hover: #e8eaed;
  --epos-panel:         #e8eaed;
  --epos-header:        #ffffff;
  --epos-text:          #1a1d23;
  --epos-text-secondary:#5f6368;
  --epos-text-muted:    #9aa0a6;
  --epos-border:        #dadce0;
  --epos-border-light:  #c4c7cc;
  --epos-accent:        #099267;
  --epos-accent-hover:  #077a56;
  --epos-accent-bg:     rgba(9, 146, 103, 0.12);
  --epos-danger:        #d93025;
  --epos-danger-bg:     rgba(217, 48, 37, 0.15);
  --epos-success:       #1e8e3e;
  --epos-success-bg:    rgba(30, 142, 62, 0.12);
  --epos-btn-mix:       black;
  --epos-btn-mix-stock: rgba(0,0,0,0.45);
}

/* ---- Clickable Elements ---- */
a, button, [onclick], [data-action], [role="button"], label[for],
input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"],
select, .btn, .clickable { cursor: pointer; }

/* ---- User Avatar ---- */
.user-avatar {border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle;}
.user-avatar-initials {display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; background: var(--avatar-blue, #185FA5); border-radius: 50%;}