/* ============================================================
   StarBooks — Shared CSS Variables & Base Styles
   Used by: login.html, crm/*.html
   index.html has its own inline styles for the marketing page
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand colours */
  --sb-green:        #0B8A00;
  --sb-green-light:  #2CA01C;
  --sb-green-dark:   #065C00;
  --sb-green-50:     #E8F5E6;
  --sb-green-100:    #C6E8C2;
  --sb-navy:         #0D2B1E;
  --sb-dark:         #1A1A2E;
  --sb-gold:         #F5A623;
  --sb-gold-light:   #FFD580;
  --sb-white:        #FFFFFF;

  /* Greys */
  --sb-gray-50:   #F8F9FA;
  --sb-gray-100:  #F1F3F5;
  --sb-gray-200:  #E9ECEF;
  --sb-gray-300:  #DEE2E6;
  --sb-gray-400:  #ADB5BD;
  --sb-gray-600:  #6C757D;
  --sb-gray-700:  #495057;
  --sb-gray-800:  #343A40;
  --sb-gray-900:  #212529;

  /* UI tokens */
  --sb-radius:     12px;
  --sb-radius-sm:  8px;
  --sb-radius-lg:  20px;
  --sb-shadow:     0 4px 24px rgba(0,0,0,0.08);
  --sb-shadow-lg:  0 12px 48px rgba(0,0,0,0.12);
  --sb-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* CRM-specific */
  --crm-sidebar-bg:     #0D2B1E;
  --crm-sidebar-text:   rgba(255,255,255,0.7);
  --crm-sidebar-active: #0B8A00;
  --crm-header-bg:      #ffffff;
  --crm-body-bg:        #F8F9FA;
  --crm-card-bg:        #ffffff;
  --crm-accent:         #0B8A00;
  --crm-accent-gold:    #F5A623;
  --crm-danger:         #DC3545;
  --crm-warning:        #FFC107;
  --crm-success:        #198754;
  --crm-info:           #0D6EFD;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--sb-gray-800);
  background: var(--sb-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Shared button base */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all var(--sb-transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--sb-green);
  color: white;
}
.btn-primary:hover { background: var(--sb-green-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(11,138,0,0.3); }
.btn-outline {
  background: transparent;
  color: var(--sb-green);
  border: 1.5px solid var(--sb-green);
}
.btn-outline:hover { background: var(--sb-green-50); }
.btn-danger {
  background: var(--crm-danger);
  color: white;
}
.btn-danger:hover { background: #b02a37; }
.btn-ghost {
  background: transparent;
  color: var(--sb-gray-600);
  border: 1px solid var(--sb-gray-200);
}
.btn-ghost:hover { background: var(--sb-gray-50); color: var(--sb-gray-800); }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-lg { padding: 14px 32px; font-size: 15px; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }