/**
 * CENTRALIZED THEME CONFIGURATION / DESIGN TOKENS
 * FastFood ERP & POS System
 * Inspired by Foodpanda's modern, clean, and friendly design language.
 *
 * CRITICAL ARCHITECTURAL RULE:
 * This is the SINGLE SOURCE OF TRUTH for all design tokens across fastfood_erp.
 * Do NOT hardcode colors, spacing, shadows, typography, or border-radius in UI views.
 * Changing values in this file seamlessly updates the entire application.
 */

:root {
  /* ==========================================
     1. COLOR SYSTEM (FOODPANDA BRAND PALETTE)
     ========================================== */
  --color-primary: #D70F64;               /* Signature Panda Pink */
  --color-primary-hover: #C00A56;         /* Darker pink on hover */
  --color-primary-soft: #FFEBF2;          /* Soft pastel pink background */
  --color-primary-contrast: #FFFFFF;      /* Clean white on brand */

  --color-text-primary: #222222;          /* High contrast clean dark */
  --color-text-secondary: #707070;        /* Friendly muted secondary text */
  --color-text-muted: #9E9E9E;
  --color-text-on-primary: #FFFFFF;

  --color-canvas: #FFFFFF;                /* Crisp clean white canvas */
  --color-surface: #F7F7F7;               /* Friendly soft surface for cards & panels */
  --color-surface-elevated: #FFFFFF;      /* Elevated white card surface */
  --color-border: #EBEBEB;                /* Soft friendly dividers & borders */
  --color-border-hover: #DCDCDC;

  --color-success: #008A05;               /* Foodpanda vibrant green */
  --color-success-soft: #E6F5E8;
  --color-warning: #F59E0B;               /* Warm amber */
  --color-warning-soft: #FEF3C7;
  --color-error: #E11D48;                 /* Clean crimson */
  --color-error-soft: #FFE4E6;
  --color-info: #0EA5E9;                  /* Sky blue */
  --color-info-soft: #E0F2FE;

  /* ==========================================
     2. FRIENDLY BORDER RADIUS SYSTEM
     ========================================== */
  --radius-pill: 9999px;                  /* Full pill shape for buttons and filter chips */
  --radius-card: 16px;                    /* Friendly rounded card corners */
  --radius-modal: 20px;                   /* Modals, bottom sheets, slide-overs */
  --radius-input: 10px;                   /* Form inputs, select dropdowns */
  --radius-badge: 8px;                    /* Badges, tags, microchips */
  --radius-sm: 6px;

  /* ==========================================
     3. SHADOWS & ELEVATION
     ========================================== */
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.16);
  --shadow-dropdown: 0 10px 28px rgba(0, 0, 0, 0.12);
  --shadow-focus-ring: 0 0 0 3px rgba(215, 15, 100, 0.18);
  --shadow-pill-button: 0 4px 14px rgba(215, 15, 100, 0.25);
  --shadow-pill-button-hover: 0 6px 18px rgba(215, 15, 100, 0.35);

  /* ==========================================
     4. TYPOGRAPHY SCALES
     ========================================== */
  --font-family-base: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: 'Plus Jakarta Sans', 'Outfit', sans-serif;

  --font-size-h1: 2rem;                   /* 32px */
  --font-size-h2: 1.5rem;                 /* 24px */
  --font-size-h3: 1.25rem;                /* 20px */
  --font-size-h4: 1.125rem;               /* 18px */
  --font-size-h5: 1rem;                   /* 16px */
  --font-size-body: 0.875rem;             /* 14px */
  --font-size-body-sm: 0.8125rem;         /* 13px */
  --font-size-badge: 0.75rem;             /* 12px */
  --font-size-micro: 0.6875rem;           /* 11px */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ==========================================
     5. SPACING SYSTEM
     ========================================== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* ==========================================
     6. TRANSITIONS & ANIMATIONS
     ========================================== */
  --transition-fast: 0.15s ease-in-out;
  --transition-default: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================
   DARK THEME OVERRIDES (Optional Toggle)
   Preserves #D70F64 Brand Identity
   ========================================== */
[data-theme="dark"] {
  --color-canvas: #11141A;
  --color-surface: #1A1E26;
  --color-surface-elevated: #222733;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.16);

  --color-text-primary: #F5F5F7;
  --color-text-secondary: #A0A6B2;
  --color-text-muted: #737B8C;

  --color-primary-soft: rgba(215, 15, 100, 0.22);
  --color-success-soft: rgba(0, 138, 5, 0.2);
  --color-warning-soft: rgba(245, 158, 11, 0.2);
  --color-error-soft: rgba(225, 29, 72, 0.2);

  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 16px 40px rgba(0, 0, 0, 0.7);
}

/* ==========================================
   REUSABLE PANDA COMPONENT UTILITIES
   ========================================== */

/* 1. Panda Pill Buttons */
.btn-panda-primary {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 0.55rem 1.35rem !important;
  font-weight: var(--font-weight-semibold) !important;
  font-size: var(--font-size-body-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  box-shadow: var(--shadow-pill-button) !important;
  transition: var(--transition-default) !important;
  text-decoration: none !important;
}

.btn-panda-primary:hover {
  background-color: var(--color-primary-hover) !important;
  box-shadow: var(--shadow-pill-button-hover) !important;
  transform: translateY(-1px) !important;
}

.btn-panda-soft {
  background-color: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgba(215, 15, 100, 0.2) !important;
  border-radius: var(--radius-pill) !important;
  padding: 0.55rem 1.35rem !important;
  font-weight: var(--font-weight-semibold) !important;
  font-size: var(--font-size-body-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  transition: var(--transition-default) !important;
  text-decoration: none !important;
}

.btn-panda-soft:hover {
  background-color: #FFDCE8 !important;
  transform: translateY(-1px) !important;
}

/* 2. Panda Friendly Cards */
.panda-card {
  background-color: var(--color-canvas) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 1.5rem !important;
  transition: var(--transition-default) !important;
}

.panda-card:hover {
  box-shadow: var(--shadow-card-hover) !important;
}

/* 3. Panda Badges */
.panda-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: var(--radius-pill) !important;
  font-size: var(--font-size-badge) !important;
  font-weight: var(--font-weight-semibold) !important;
  line-height: 1.2 !important;
}

.panda-badge-primary {
  background-color: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgba(215, 15, 100, 0.25) !important;
}

.panda-badge-success {
  background-color: var(--color-success-soft) !important;
  color: var(--color-success) !important;
  border: 1px solid rgba(0, 138, 5, 0.25) !important;
}

.panda-badge-warning {
  background-color: var(--color-warning-soft) !important;
  color: #B45309 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.panda-badge-error {
  background-color: var(--color-error-soft) !important;
  color: var(--color-error) !important;
  border: 1px solid rgba(225, 29, 72, 0.25) !important;
}