/* ============================================
   DESIGN SYSTEM — CSS VARIABLES
   ============================================ */
:root {
  /* Brand Colors — netral, overridden by brand.js at runtime dari brand_config klien */
  --maroon:     #2D3A4A;
  --maroon-d:   #1E2732;
  --maroon-l:   #4A5C71;
  --maroon-pale:#EEF1F4;
  --gold:       #B8935A;
  --gold-l:     #D3B482;
  --gold-pale:  #FAF5EC;
  --gold-mid:   #E0C89A;

  /* Neutrals — light theme */
  --white:      #FFFFFF;
  --off:        #FAFAF8;
  --light:      #F4F1EC;
  --light2:     #EDE8E1;
  --border:     #E5DDD4;
  --border-2:   #D6CEC5;
  --text:       #1A1108;
  --text-2:     #3D3020;
  --gray:       #8A7E74;
  --gray-2:     #5A4E44;
  --green:      #15803D;
  --green-pale: #F0FDF4;
  --red:        #DC2626;
  --red-pale:   #FEF2F2;

  /* Typography */
  --f:          'Plus Jakarta Sans', sans-serif;
  --f-serif:    'Lora', Georgia, serif;
  --f-brand:    var(--f-serif); /* nama toko (navbar) & judul hero — overridden per kategori bisnis via brand.js */

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(26,17,8,0.08), 0 1px 2px rgba(26,17,8,0.04);
  --shadow:     0 4px 12px rgba(26,17,8,0.10), 0 2px 4px rgba(26,17,8,0.06);
  --shadow-md:  0 8px 24px rgba(26,17,8,0.12), 0 4px 8px rgba(26,17,8,0.06);
  --shadow-lg:  0 16px 48px rgba(26,17,8,0.14), 0 8px 16px rgba(26,17,8,0.08);

  /* Radius */
  --r-sm:       6px;
  --r:          10px;
  --r-md:       14px;
  --r-lg:       20px;
  --r-xl:       28px;

  /* Transitions */
  --tr:         all .2s cubic-bezier(.4,0,.2,1);
  --tr-slow:    all .35s cubic-bezier(.4,0,.2,1);

  /* Layout */
  --max:        1320px;
  --nav-h:      64px;

  /* Foreground for anything sitting directly on a --maroon background
     (buttons, badges, sidebar, toasts, ...) - --maroon is really "brand
     primary color", client-customizable via Pengaturan Brand, not
     actually maroon. Default assumes a dark color (white fg); brand.js
     recomputes this at runtime from color_primary's brightness so a
     white-label client who picks a light brand color still gets
     readable (dark) text/icons instead of invisible white-on-white. */
  --maroon-fg-rgb: 255,255,255;
}