/* ==================================================
   BOOKA DESIGN SYSTEM — VARIABLES & TOKENS
   Primary: Indigo #4F46E5
   Font: Cairo
   Spacing: 4px base
   Radius: 6px, 8px, 12px, 16px, 9999px
================================================== */

:root {
  /* Colors - Brand & Primary */
  --booka-primary: #4F46E5;
  --booka-primary-hover: #4338CA;
  --booka-primary-light: #EEF2FF;
  --booka-primary-muted: rgba(79, 70, 229, 0.08);

  /* Colors - Core Neutrals */
  --booka-bg: #F8FAFC;
  --booka-surface: #FFFFFF;
  --booka-surface-subtle: #F1F5F9;
  --booka-border: #E2E8F0;
  --booka-border-strong: #CBD5E1;

  /* Colors - Typography */
  --booka-text-primary: #0F172A;
  --booka-text-secondary: #475569;
  --booka-text-muted: #94A3B8;
  --booka-text-on-primary: #FFFFFF;

  /* Colors - Semantics */
  --booka-success: #16A34A;
  --booka-success-bg: #F0FDF4;
  --booka-warning: #D97706;
  --booka-warning-bg: #FFFBEB;
  --booka-danger: #DC2626;
  --booka-danger-bg: #FEF2F2;
  --booka-info: #0284C7;
  --booka-info-bg: #F0F9FF;

  /* Typography */
  --booka-font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  --booka-text-xs: 0.75rem;    /* 12px */
  --booka-text-sm: 0.875rem;   /* 14px */
  --booka-text-base: 1rem;     /* 16px */
  --booka-text-lg: 1.125rem;   /* 18px */
  --booka-text-xl: 1.25rem;    /* 20px */
  --booka-text-2xl: 1.5rem;    /* 24px */
  --booka-text-3xl: 1.875rem;  /* 30px */

  --booka-weight-regular: 400;
  --booka-weight-medium: 500;
  --booka-weight-semibold: 600;
  --booka-weight-bold: 700;

  /* Spacing Scale (4px) */
  --booka-space-1: 0.25rem;  /* 4px */
  --booka-space-2: 0.5rem;   /* 8px */
  --booka-space-3: 0.75rem;  /* 12px */
  --booka-space-4: 1rem;     /* 16px */
  --booka-space-5: 1.25rem;  /* 20px */
  --booka-space-6: 1.5rem;   /* 24px */
  --booka-space-8: 2rem;     /* 32px */
  --booka-space-10: 2.5rem;  /* 40px */
  --booka-space-12: 3rem;    /* 48px */

  /* Border Radius */
  --booka-radius-sm: 0.375rem; /* 6px */
  --booka-radius-md: 0.5rem;   /* 8px */
  --booka-radius-lg: 0.75rem;  /* 12px */
  --booka-radius-xl: 1rem;     /* 16px */
  --booka-radius-full: 9999px;

  /* Shadows */
  --booka-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --booka-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --booka-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);

  /* Layout Dimensions */
  --booka-sidebar-width: 240px;
  --booka-header-height: 64px;
  --booka-mobile-nav-height: 64px;
}