/*
 * Maitre'D Portal — Design Tokens
 * ================================
 * ALL colors, fonts, and radii are defined here.
 * To re-theme the portal, only edit this file.
 */

:root {

  /* ── BRAND ── */
  --color-primary:          #F8681E;
  --color-primary-dark:     #d4530c;
  --color-primary-light:    #fa8b4a;
  --color-primary-xlight:   #fef0e8;
  --gradient-primary:       linear-gradient(135deg, #F8681E 0%, #fa8b4a 100%);
  --gradient-login-bg:      linear-gradient(150deg, #F8681E 0%, #d4530c 40%, #a33e09 100%);

  /* ── SIDEBAR ── */
  --sidebar-bg:             #000000;
  --sidebar-bg-alt:         #111111;
  --sidebar-text:           rgba(255, 255, 255, 0.70);
  --sidebar-text-active:    #ffffff;
  --sidebar-active-bg:      rgba(255, 255, 255, 0.12);
  --sidebar-hover-bg:       rgba(255, 255, 255, 0.06);
  --sidebar-border:         rgba(255, 255, 255, 0.07);
  --sidebar-width:          240px;
  --sidebar-width-collapsed: 64px;

  /* ── NEUTRALS ── */
  --color-bg:               #F5F5F5;
  --color-bg-alt:           #ebebeb;
  --color-surface:          #ffffff;
  --color-surface-raised:   #f8f9fb;
  --color-border:           #e5e7eb;
  --color-border-strong:    #d1d5db;

  /* ── TEXT ── */
  --color-text:             #1a1a1a;
  --color-text-secondary:   #6b7280;
  --color-text-muted:       #9ca3af;
  --color-text-disabled:    #d1d5db;
  --color-text-inverse:     #ffffff;

  /* ── SEMANTIC COLORS ── */
  --color-success:          #10b981;
  --color-success-dark:     #059669;
  --color-success-bg:       #ecfdf5;
  --color-success-border:   #a7f3d0;

  --color-warning:          #f59e0b;
  --color-warning-dark:     #d97706;
  --color-warning-bg:       #fffbeb;
  --color-warning-border:   #fde68a;

  --color-error:            #ef4444;
  --color-error-dark:       #dc2626;
  --color-error-bg:         #fef2f2;
  --color-error-border:     #fecaca;

  --color-info:             #3b82f6;
  --color-info-dark:        #2563eb;
  --color-info-bg:          #eff6ff;
  --color-info-border:      #bfdbfe;

  /* ── MODULE ACCENT COLORS ── */
  --module-analytics:       #F8681E;
  --module-menu:            #7c3aed;
  --module-reports:         #059669;
  --module-support:         #dc2626;
  --module-loyalty:         #ea580c;
  --module-staff:           #0891b2;
  --module-devices:         #4f46e5;
  --module-payments:        #b45309;

  /* ── TYPOGRAPHY ── */
  --font-heading:           'Poppins', 'Roboto', sans-serif;
  --font-body:              'Roboto', sans-serif;
  --font-mono:              'Roboto Mono', monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  32px;
  --text-5xl:  40px;
  --text-6xl:  48px;

  /* ── BORDER RADII ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-3xl:  48px;
  --radius-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.07);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.09);
  --shadow-lg:   0 8px 20px rgba(0, 0, 0, 0.11);
  --shadow-xl:   0 12px 28px rgba(0, 0, 0, 0.13);
  --shadow-2xl:  0 20px 48px rgba(0, 0, 0, 0.18);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);

  /* ── SPACING ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── TRANSITIONS ── */
  --transition-fast:   all 0.15s ease;
  --transition:        all 0.20s ease;
  --transition-slow:   all 0.30s ease;

  /* ── Z-INDEX ── */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-sidebar: 300;
  --z-modal:   400;
  --z-toast:   500;

  /* ── BREAKPOINTS (reference only — use in media queries) ── */
  /* --bp-sm: 640px  --bp-md: 768px  --bp-lg: 1024px  --bp-xl: 1280px */
}