/* ============================================================
   BestConnect Design System — Unified Tokens
   ============================================================
   Colors extracted from the BestConnect Logo:
   - Primary: Forest Green (#1B7340) — cart icon
   - Accent: Golden Amber (#D4A017) — lightning bolt  
   - Dark: Deep Green (#0F4D28) — logo text
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
  /* ━━━━ PRIMARY: BestConnect Green (from logo cart) ━━━━ */
  --bc-primary-50:  #EDFBF2;
  --bc-primary-100: #D4F5E0;
  --bc-primary-200: #A3E8BF;
  --bc-primary-400: #2E9E5E;
  --bc-primary:     #1B7340;
  --bc-primary-600: #166134;
  --bc-primary-700: #0F4D28;
  --bc-primary-900: #082E18;

  /* ━━━━ ACCENT: Golden Amber (from logo lightning bolt) ━━━━ */
  --bc-accent-50:  #FFFBEB;
  --bc-accent-100: #FEF3C7;
  --bc-accent-400: #FBBF24;
  --bc-accent:     #D4A017;
  --bc-accent-600: #B8860B;
  --bc-accent-700: #8B6914;

  /* ━━━━ NAVY: Authority ━━━━ */
  --bc-navy-50:  #F8FAFC;
  --bc-navy-100: #F1F5F9;
  --bc-navy-200: #E2E8F0;
  --bc-navy-400: #94A3B8;
  --bc-navy-600: #475569;
  --bc-navy-800: #1E293B;
  --bc-navy-900: #0F172A;

  /* ━━━━ SEMANTIC ━━━━ */
  --bc-success: #10B981;
  --bc-warning: #F59E0B;
  --bc-error:   #EF4444;
  --bc-info:    #3B82F6;

  /* ━━━━ SURFACES ━━━━ */
  --bc-surface-page:     #F8FAFC;
  --bc-surface-card:     #FFFFFF;
  --bc-surface-elevated: #FFFFFF;
  --bc-border:           #E2E8F0;
  --bc-border-light:     #F1F5F9;

  /* ━━━━ GRADIENTS ━━━━ */
  --bc-gradient-primary: linear-gradient(135deg, #1B7340 0%, #0F4D28 100%);
  --bc-gradient-accent:  linear-gradient(135deg, #D4A017 0%, #B8860B 100%);
  --bc-gradient-glass:   linear-gradient(135deg, rgba(27,115,64,0.95) 0%, rgba(15,77,40,0.90) 100%);
  --bc-gradient-hero:    linear-gradient(135deg, #0F4D28 0%, #1B7340 60%, #2E9E5E 100%);

  /* ━━━━ SHADOWS ━━━━ */
  --bc-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --bc-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --bc-shadow:    0 4px 12px rgba(15, 23, 42, 0.08);
  --bc-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --bc-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* ━━━━ TYPOGRAPHY ━━━━ */
  --bc-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ━━━━ RADIUS ━━━━ */
  --bc-radius-xs:   6px;
  --bc-radius-sm:   8px;
  --bc-radius:      16px;
  --bc-radius-lg:   20px;
  --bc-radius-xl:   28px;
  --bc-radius-full: 9999px;

  /* ━━━━ TRANSITIONS ━━━━ */
  --bc-ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --bc-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --bc-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --bc-duration-fast: 150ms;
  --bc-duration:      250ms;
  --bc-duration-slow: 400ms;

  /* ━━━━ LEGACY ALIASES (backward compat) ━━━━ */
  --primary:       var(--bc-primary);
  --primary-dark:  var(--bc-primary-700);
  --primary-light: var(--bc-primary-50);
  --secondary:     var(--bc-primary-600);
  --bg-color:      var(--bc-surface-page);
  --text-dark:     var(--bc-navy-800);
  --text-muted:    var(--bc-navy-400);
  --white:         var(--bc-surface-card);
  --shadow-sm:     var(--bc-shadow-sm);
  --shadow:        var(--bc-shadow);
  --shadow-md:     var(--bc-shadow-md);
  --radius-sm:     var(--bc-radius-sm);
  --radius:        var(--bc-radius);
  --radius-full:   var(--bc-radius-full);

  /* Cart page legacy aliases */
  --cp-primary:      var(--bc-primary);
  --cp-primary-dark: var(--bc-primary-700);
  --cp-page:         var(--bc-surface-page);
  --cp-panel:        var(--bc-surface-card);
  --cp-text:         var(--bc-navy-900);
  --cp-muted:        var(--bc-navy-400);
  --cp-line:         var(--bc-border);
  --cp-danger:       var(--bc-error);
  --cp-radius:       var(--bc-radius);
  --cp-shadow:       var(--bc-shadow);
}

/* ━━━━ GLOBAL RESETS ━━━━ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--bc-font);
  color: var(--bc-navy-800);
  margin: 0;
  padding: 0;
}

/* ━━━━ SCROLLBAR STYLING ━━━━ */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--bc-navy-200);
  border-radius: var(--bc-radius-full);
}

/* ━━━━ SELECTION STYLING ━━━━ */
::selection {
  background: var(--bc-primary-200);
  color: var(--bc-primary-900);
}

/* ━━━━ UTILITY CLASSES ━━━━ */
.bc-text-primary { color: var(--bc-primary) !important; }
.bc-text-accent  { color: var(--bc-accent) !important; }
.bc-text-success { color: var(--bc-success) !important; }
.bc-text-warning { color: var(--bc-warning) !important; }
.bc-text-error   { color: var(--bc-error) !important; }
.bc-text-info    { color: var(--bc-info) !important; }
.bc-text-muted   { color: var(--bc-navy-400) !important; }

.bc-bg-primary   { background: var(--bc-primary) !important; }
.bc-bg-accent    { background: var(--bc-accent) !important; }
.bc-bg-page      { background: var(--bc-surface-page) !important; }
.bc-bg-card      { background: var(--bc-surface-card) !important; }

/* Standard button base */
.bc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: var(--bc-radius);
  font-family: var(--bc-font);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--bc-duration) var(--bc-ease);
  text-decoration: none;
  line-height: 1;
}

.bc-btn-primary {
  background: var(--bc-primary);
  color: white;
}
.bc-btn-primary:hover {
  background: var(--bc-primary-600);
  transform: translateY(-1px);
  box-shadow: var(--bc-shadow);
}
.bc-btn-primary:active {
  background: var(--bc-primary-700);
  transform: translateY(0);
}

.bc-btn-accent {
  background: var(--bc-accent);
  color: white;
}
.bc-btn-accent:hover {
  background: var(--bc-accent-600);
  transform: translateY(-1px);
  box-shadow: var(--bc-shadow);
}

.bc-btn-outline {
  background: transparent;
  color: var(--bc-primary);
  border: 2px solid var(--bc-primary);
}
.bc-btn-outline:hover {
  background: var(--bc-primary-50);
}

/* Standard card */
.bc-card {
  background: var(--bc-surface-card);
  border-radius: var(--bc-radius);
  border: 1px solid var(--bc-border-light);
  box-shadow: var(--bc-shadow-sm);
  padding: 16px;
}

/* Badge styles */
.bc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--bc-radius-full);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.bc-badge-primary {
  background: var(--bc-primary-50);
  color: var(--bc-primary);
}
.bc-badge-accent {
  background: var(--bc-accent-50);
  color: var(--bc-accent-600);
}
.bc-badge-success {
  background: #ECFDF5;
  color: var(--bc-success);
}
.bc-badge-error {
  background: #FEF2F2;
  color: var(--bc-error);
}