/**
 * BWP Design System
 * Clean, modern UI inspired by Stripe, Apple, Notion
 * Load this first - all other CSS extends these tokens
 */

/* ============================================
   TYPOGRAPHY SYSTEM
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* Inter loads async; Plus Jakarta / Fraunces may load via bwp-fonts (moving-company-portal.php). */

:root {
  /* Font families */
  --bwp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Dashboard headings: match enqueued Plus Jakarta Sans, fall back to Inter */
  --bwp-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bwp-font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;

  /* Font sizes */
  --bwp-text-xs: 0.75rem;    /* 12px */
  --bwp-text-sm: 0.875rem;  /* 14px */
  --bwp-text-base: 1rem;     /* 16px */
  --bwp-text-lg: 1.125rem;  /* 18px */
  --bwp-text-xl: 1.25rem;   /* 20px */
  --bwp-text-2xl: 1.5rem;   /* 24px */
  --bwp-text-3xl: 1.875rem; /* 30px */

  /* Line heights */
  --bwp-leading-tight: 1.25;
  --bwp-leading-snug: 1.375;
  --bwp-leading-normal: 1.5;
  --bwp-leading-relaxed: 1.625;

  /* Font weights */
  --bwp-font-normal: 400;
  --bwp-font-medium: 500;
  --bwp-font-semibold: 600;
  --bwp-font-bold: 700;
  --bwp-font-extrabold: 800;
}

/* ============================================
   SPACING SYSTEM (8px base)
   ============================================ */

:root {
  --bwp-space-0: 0;
  --bwp-space-1: 4px;
  --bwp-space-2: 8px;
  --bwp-space-3: 12px;
  --bwp-space-4: 16px;
  --bwp-space-5: 20px;
  --bwp-space-6: 24px;
  --bwp-space-8: 32px;
  --bwp-space-10: 40px;
  --bwp-space-12: 48px;
  --bwp-space-16: 64px;
}

/* ============================================
   LAYOUT TOKENS
   ============================================ */

:root {
  --bwp-container-max: 1680px;
  --bwp-content-padding: 24px;
  --bwp-grid-gap: 20px;
  --bwp-sidebar-width: 64px;
  --bwp-header-height: 64px;
  --bwp-card-radius: 12px;
  --bwp-card-padding: 20px;
  --bwp-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  --bwp-card-border: 1px solid #e5e7eb;
  --bwp-card-bg: #ffffff;
}

/* ============================================
   LIGHT THEME ONLY (dark/light toggle removed)
   ============================================ */

:root {
  --bwp-bg: #f5f7fb;
  --bwp-bg-secondary: #ffffff;
  --bwp-bg-muted: #f1f5f9;

  --bwp-text: #111827;
  --bwp-text-dark: #111827;
  --bwp-text-secondary: #6b7280;
  --bwp-text-muted: #6b7280;

  --bwp-border: #e5e7eb;
  --bwp-border-light: #f3f4f6;

  --bwp-primary: #2563eb;
  --bwp-primary-hover: #1d4ed8;
  --bwp-primary-light: #dbeafe;
  --bwp-primary-glow: rgba(37, 99, 235, 0.15);

  --bwp-success: #16a34a;
  --bwp-success-bg: #dcfce7;
  --bwp-warning: #3b82f6;
  --bwp-warning-bg: #dbeafe;
  --bwp-error: #dc2626;
  --bwp-error-bg: #fee2e2;
  --bwp-info: #2563eb;
  --bwp-info-bg: #dbeafe;

  --bwp-sidebar: #F4F4F5;
  --bwp-sidebar-hover: #E4E4E7;
  --bwp-card: #FFFFFF;
  --bwp-card-hover: #FAFAFA;
  /* Surfaces (alias for cards / modals — used across portal-saas & CRM) */
  --bwp-surface-elevated: #ffffff;
  --bwp-text-on-primary: #ffffff;

  --bwp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
  --bwp-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --bwp-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --bwp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
  --bwp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06);
  --bwp-shadow-strong: 0 16px 48px rgba(0, 0, 0, 0.1);
  --bwp-modal-overlay: rgba(0, 0, 0, 0.4);

  --bwp-input-bg: #FFFFFF;
  --bwp-input-border: var(--bwp-border);
  --bwp-hover: #F4F4F5;

  --bwp-radius-sm: 8px;
  --bwp-radius: 10px;
  --bwp-radius-md: 12px;
  --bwp-radius-lg: 16px;
  --bwp-radius-xl: 20px;
  --bwp-radius-card: 12px;

  --bwp-transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
  --bwp-transition-fast: all 0.1s cubic-bezier(0.2, 0, 0, 1);
  --bwp-transition-slow: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  --bwp-ease-out: cubic-bezier(0.2, 0, 0, 1);
}

/* ============================================
   BASE RESET & BODY
   ============================================ */

.bwp-portal-body,
.bwp-login-page {
  margin: 0;
  padding: 0;
  font-family: var(--bwp-font-sans);
  font-size: var(--bwp-text-base);
  line-height: var(--bwp-leading-normal);
  color: var(--bwp-text);
  background: var(--bwp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   GLOBAL LAYOUT SYSTEM
   Single source of truth for app structure.
   sidebar(64px) | header(64px fixed) | content(flex)
   ============================================ */

.bwp-portal-layout,
.bwp-portal-layout.app-layout {
  display: flex;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.bwp-portal-content,
.bwp-portal-main {
  flex: 1;
  margin-left: var(--bwp-sidebar-width);
  margin-top: var(--bwp-header-height);
  padding: var(--bwp-content-padding);
  background: var(--bwp-bg);
  min-height: calc(100vh - var(--bwp-header-height));
}

.bwp-portal-main-content {
  max-width: var(--bwp-container-max);
  width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.bwp-page-container,
.bwp-admin-portal-page {
  max-width: var(--bwp-container-max);
  width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================
   CARD SYSTEM - Single definition
   ============================================ */

.card,
.bwp-card {
  background: var(--bwp-card-bg);
  border-radius: var(--bwp-card-radius);
  border: var(--bwp-card-border);
  padding: var(--bwp-card-padding);
  box-shadow: var(--bwp-card-shadow);
  box-sizing: border-box;
}

.bwp-stat-card {
  background: var(--bwp-card-bg);
  border-radius: var(--bwp-card-radius);
  border: var(--bwp-card-border);
  padding: var(--bwp-card-padding);
  box-shadow: var(--bwp-card-shadow);
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ============================================
   GRID SYSTEM - Consistent gaps
   ============================================ */

.grid {
  display: grid;
  gap: var(--bwp-grid-gap);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .bwp-portal-content,
  .bwp-portal-main {
    margin-left: 0;
    padding: 16px;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.bwp-text-sm { font-size: var(--bwp-text-sm); }
.bwp-text-base { font-size: var(--bwp-text-base); }
.bwp-text-lg { font-size: var(--bwp-text-lg); }
.bwp-text-xl { font-size: var(--bwp-text-xl); }
.bwp-text-2xl { font-size: var(--bwp-text-2xl); }
.bwp-text-3xl { font-size: var(--bwp-text-3xl); }

.bwp-font-medium { font-weight: var(--bwp-font-medium); }
.bwp-font-semibold { font-weight: var(--bwp-font-semibold); }
.bwp-font-bold { font-weight: var(--bwp-font-bold); }

.bwp-text-muted { color: var(--bwp-text-muted); }
.bwp-text-secondary { color: var(--bwp-text-secondary); }

.bwp-p-4 { padding: var(--bwp-space-4); }
.bwp-p-6 { padding: var(--bwp-space-6); }
.bwp-p-8 { padding: var(--bwp-space-8); }
.bwp-mb-4 { margin-bottom: var(--bwp-space-4); }
.bwp-mb-6 { margin-bottom: var(--bwp-space-6); }
.bwp-gap-4 { gap: var(--bwp-space-4); }
.bwp-gap-6 { gap: var(--bwp-space-6); }

/* ============================================
   SCROLLBAR - Minimal
   ============================================ */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bwp-border);
  border-radius: var(--bwp-radius);
}
::-webkit-scrollbar-thumb:hover { background: var(--bwp-text-muted); }
* { scrollbar-width: thin; scrollbar-color: var(--bwp-border) transparent; }