/* ============================================================
   VARIABLES.CSS – Design Tokens
   Edit colors, fonts, shadows here to theme the whole app.
   ============================================================ */

:root {
  /* --- Brand Pastel Palette --- */
  --color-primary:        #7C9EFF;   /* Soft indigo-blue */
  --color-primary-dark:   #5B7FE8;
  --color-primary-light:  #E8EEFF;
  --color-secondary:      #A8D5BA;   /* Soft mint-green */
  --color-secondary-dark: #7BBFA0;
  --color-accent:         #F9C8D4;   /* Soft blush-pink */
  --color-accent-dark:    #E89AAD;

  /* --- Neutrals --- */
  --color-bg:             #F4F6FB;   /* Main page bg */
  --color-surface:        #FFFFFF;   /* Cards, panels */
  --color-surface-alt:    #F9FAFB;   /* Alternate rows */
  --color-border:         #E4E8F0;
  --color-border-light:   #EEF1F8;

  /* --- Text --- */
  --color-text-primary:   #1E2A3A;
  --color-text-secondary: #5A6A7E;
  --color-text-muted:     #96A5B8;
  --color-text-inverse:   #FFFFFF;

  /* --- Status / Badges --- */
  --color-paid:           #D4F5E3;
  --color-paid-text:      #1A7A4A;
  --color-pending:        #FEF3C7;
  --color-pending-text:   #92600A;
  --color-refunded:       #E0E7FF;
  --color-refunded-text:  #3730A3;
  --color-danger:         #FFE4E4;
  --color-danger-text:    #B91C1C;
  --color-info:           #E0F2FE;
  --color-info-text:      #0369A1;

  /* --- Sidebar --- */
  --sidebar-width:        260px;
  --sidebar-bg:           #1E2A3A;
  --sidebar-text:         #CBD8E7;
  --sidebar-text-active:  #FFFFFF;
  --sidebar-active-bg:    rgba(124, 158, 255, 0.18);
  --sidebar-hover-bg:     rgba(255,255,255,0.06);
  --sidebar-accent:       #7C9EFF;

  /* --- Navbar --- */
  --navbar-height:        64px;
  --navbar-bg:            #FFFFFF;

  /* --- Typography --- */
  --font-family:          'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-size-xs:         0.65rem;   /* ~10.4px */
  --font-size-sm:         0.72rem;   /* ~11.5px */
  --font-size-base:       0.78rem;   /* ~12.5px */
  --font-size-md:         0.85rem;   /* ~13.6px */
  --font-size-lg:         0.95rem;   /* ~15.2px */
  --font-size-xl:         1.05rem;   /* ~16.8px */
  --font-size-2xl:        1.25rem;   /* ~20px   */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* --- Spacing --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* --- Radius --- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs:  0 1px 3px rgba(30,42,58,0.06);
  --shadow-sm:  0 2px 8px rgba(30,42,58,0.08);
  --shadow-md:  0 4px 16px rgba(30,42,58,0.10);
  --shadow-lg:  0 8px 30px rgba(30,42,58,0.13);
  --shadow-card: 0 2px 12px rgba(124,158,255,0.08), 0 1px 3px rgba(30,42,58,0.06);

  /* --- Transitions --- */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* --- Z-Index --- */
  --z-sidebar:  100;
  --z-navbar:   200;
  --z-modal:    1000;
  --z-toast:    2000;
}