@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: light;

  /* ── Brand: Navy + Muted Gold ── */
  --sg-primary: #172554;           /* Deep Navy — brand primary */
  --sg-primary-50: #EFF4FF;        /* Primary Light */
  --sg-primary-100: #DBEAFE;       /* Lighter blue */
  --sg-primary-200: #BFDBFE;       /* Lightest blue */
  --sg-primary-600: #1E3A8A;       /* Navy hover */
  --sg-primary-700: #1E3A8A;       /* Navy hover */
  --sg-primary-900: #172554;       /* Navy dark */

  --sg-secondary: #B08D57;         /* Muted Gold */
  --sg-secondary-50: #F7F1E6;      /* Gold Light */
  --sg-secondary-100: #F7F1E6;     /* Gold Light */
  --sg-secondary-200: #E5E7EB;     /* Border */
  --sg-secondary-300: #D0D5DD;     /* Border secondary */
  --sg-secondary-400: #98A2B3;     /* Muted text */
  --sg-secondary-500: #667085;     /* Text secondary */
  --sg-secondary-600: #475467;     /* Icons */
  --sg-secondary-700: #344054;     /* Body text */
  --sg-secondary-800: #1F2937;     /* Near black */
  --sg-secondary-900: #172033;     /* Text primary / headings */

  --sg-accent: #3568A8;            /* Info */
  --sg-accent-50: #EDF4FC;         /* Info Light */

  --sg-success: #217A52;           /* Success */
  --sg-success-50: #EAF6EF;        /* Success Light */
  --sg-success-100: #D1FAE5;       /* Success Lighter */

  --sg-warning: #B7791F;           /* Warning */
  --sg-warning-50: #FFF7E6;        /* Warning Light */
  --sg-warning-100: #FEF3C7;       /* Warning Lighter */

  --sg-error: #C2414B;             /* Danger */
  --sg-error-50: #FDECEE;          /* Error Light */
  --sg-error-100: #FFE4E6;         /* Error Lighter */

  --sg-info: #3568A8;              /* Info */
  --sg-info-50: #EDF4FC;           /* Info Light */

  --sg-white: #FFFFFF;
  --sg-black: #000000;
  --sg-bg: #F8F9FB;               /* Page background */
  --sg-surface: #FFFFFF;           /* Card surface */
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--sg-bg);
  color: var(--sg-secondary-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Inter weight guidelines:
   Page title:     600, 22-26px
   Section heading: 600, 17-19px
   Card title:     600, 15-17px
   Body text:      400, 14-16px
   Secondary text: 400, 13-14px
   Button:         500-600, 14-16px
   Stat number:    600-700, 24-32px
   Navigation:     500, 13-15px
   Caption:        400, 12-13px
*/

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  color: var(--sg-secondary-900);
}

/* ── Cards ── */
.sg-card {
  background: var(--sg-white);
  border: 1px solid var(--sg-secondary-200);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* ── Buttons ── */
.btn-primary {
  background: var(--sg-primary);
  color: var(--sg-white);
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 600;
  transition: background .2s;
}
.btn-primary:hover { background: var(--sg-primary-600); }

.btn-secondary {
  background: var(--sg-white);
  color: var(--sg-secondary-700);
  border: 1px solid var(--sg-secondary-300);
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all .2s;
}
.btn-secondary:hover { background: #F1F3F5; }

.btn-gold {
  background: var(--sg-secondary);
  color: var(--sg-white);
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 600;
  transition: background .2s;
}
.btn-gold:hover { background: #967548; }

/* ── Badges ── */
.badge-primary {
  background: var(--sg-primary-50);
  color: var(--sg-primary-700);
}
.badge-success {
  background: var(--sg-success-50);
  color: var(--sg-success);
}
.badge-warning {
  background: var(--sg-warning-50);
  color: var(--sg-warning);
}
.badge-error {
  background: var(--sg-error-50);
  color: var(--sg-error);
}

/* ── Tables ── */
.sg-table thead {
  background: var(--sg-bg);
  color: var(--sg-secondary-500);
}
.sg-table tbody tr:hover {
  background: var(--sg-bg);
}

/* ── Sidebar (dark navy for superadmin) ── */
#sg-sidebar {
  background: var(--sg-secondary-900);
  color: rgba(255,255,255,.7);
}
#sg-sidebar .sg-nav-item {
  color: rgba(255,255,255,.7);
  transition: all .2s;
}
#sg-sidebar .sg-nav-item:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
#sg-sidebar .sg-nav-active {
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: 600;
}

/* ── Sidebar (light for tenant) ── */
#sg-sidebar-light {
  background: var(--sg-white);
  border-right: 1px solid var(--sg-secondary-200);
  color: var(--sg-secondary-500);
}
#sg-sidebar-light .sg-nav-item {
  color: var(--sg-secondary-500);
  transition: all .2s;
}
#sg-sidebar-light .sg-nav-item:hover {
  background: var(--sg-primary-50);
  color: var(--sg-primary);
}
#sg-sidebar-light .sg-nav-active {
  background: var(--sg-primary-50);
  color: var(--sg-primary);
  font-weight: 600;
}

/* ── Top bar ── */
#sg-topbar {
  background: var(--sg-white);
  border-bottom: 1px solid var(--sg-secondary-200);
}

/* ── Forms ── */
input, select, textarea {
  border-color: var(--sg-secondary-200);
  color: var(--sg-secondary-900);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--sg-primary);
  box-shadow: 0 0 0 3px var(--sg-primary-50);
  outline: none;
}

/* ── Flash messages ── */
.flash-success {
  background: var(--sg-success-50);
  color: var(--sg-success);
  border: 1px solid var(--sg-success-50);
}
.flash-error {
  background: var(--sg-error-50);
  color: var(--sg-error);
  border: 1px solid var(--sg-error-50);
}

/* ── Semantic color utilities ── */
.bg-primary    { background-color: var(--sg-primary); }
.bg-primary-50 { background-color: var(--sg-primary-50); }
.bg-primary-100 { background-color: var(--sg-primary-100); }
.bg-secondary-50 { background-color: var(--sg-bg); }
.bg-gold       { background-color: var(--sg-secondary); }
.bg-gold-50    { background-color: var(--sg-secondary-50); }
.bg-success    { background-color: var(--sg-success); }
.bg-success-50 { background-color: var(--sg-success-50); }
.bg-success-100 { background-color: var(--sg-success-100); }
.bg-error      { background-color: var(--sg-error); }
.bg-error-50   { background-color: var(--sg-error-50); }
.bg-error-100  { background-color: var(--sg-error-100); }
.bg-warning    { background-color: var(--sg-warning); }
.bg-warning-50 { background-color: var(--sg-warning-50); }
.bg-warning-100 { background-color: var(--sg-warning-100); }
.bg-info       { background-color: var(--sg-info); }
.bg-info-50    { background-color: var(--sg-info-50); }

.text-primary    { color: var(--sg-primary); }
.text-primary-50 { color: var(--sg-primary-50); }
.text-primary-600 { color: var(--sg-primary-600); }
.text-secondary  { color: var(--sg-secondary); }
.text-secondary-500 { color: var(--sg-secondary-500); }
.text-secondary-600 { color: var(--sg-secondary-600); }
.text-secondary-700 { color: var(--sg-secondary-700); }
.text-muted      { color: var(--sg-secondary-400); }
.text-success    { color: var(--sg-success); }
.text-error      { color: var(--sg-error); }
.text-warning    { color: var(--sg-warning); }
.text-info       { color: var(--sg-info); }
.text-heading    { color: var(--sg-secondary-900); }
.text-body       { color: var(--sg-secondary-700); }

.border-primary   { border-color: var(--sg-primary); }
.border-primary-50 { border-color: var(--sg-primary-50); }
.border-primary-100 { border-color: var(--sg-primary-100); }
.border-secondary { border-color: var(--sg-secondary-200); }
.border-success   { border-color: var(--sg-success); }
.border-success-50 { border-color: var(--sg-success-50); }
.border-success-100 { border-color: var(--sg-success-100); }
.border-error     { border-color: var(--sg-error); }
.border-error-50 { border-color: var(--sg-error-50); }
.border-error-100 { border-color: var(--sg-error-100); }
.border-warning   { border-color: var(--sg-warning); }
.border-warning-50 { border-color: var(--sg-warning-50); }
.border-warning-100 { border-color: var(--sg-warning-100); }
.border-info     { border-color: var(--sg-info); }
.border-info-50  { border-color: var(--sg-info-50); }

.ring-primary { --tw-ring-color: var(--sg-primary-100); }
.ring-success { --tw-ring-color: var(--sg-success-100); }
.ring-error   { --tw-ring-color: var(--sg-error-100); }
.ring-warning { --tw-ring-color: var(--sg-warning-100); }

.hover\:bg-primary:hover { background-color: var(--sg-primary); }
.hover\:bg-primary-600:hover { background-color: var(--sg-primary-600); }
.hover\:bg-success:hover { background-color: var(--sg-success); }
.hover\:bg-error:hover   { background-color: var(--sg-error); }
.hover\:bg-warning:hover { background-color: var(--sg-warning); }
.hover\:bg-gold:hover    { background-color: #967548; }
.hover\:bg-secondary-50:hover { background-color: var(--sg-bg); }

.hover\:text-primary:hover { color: var(--sg-primary); }
.hover\:text-success:hover { color: var(--sg-success); }
.hover\:text-error:hover   { color: var(--sg-error); }
.hover\:text-warning:hover { color: var(--sg-warning); }
.hover\:text-secondary-600:hover { color: var(--sg-secondary-600); }

.focus\:ring-primary:focus { --tw-ring-color: var(--sg-primary-100); }
.focus\:ring-success:focus { --tw-ring-color: var(--sg-success-100); }
.focus\:ring-error:focus   { --tw-ring-color: var(--sg-error-100); }
.focus\:ring-warning:focus { --tw-ring-color: var(--sg-warning-100); }

/* ── Stat Cards ── */
.stat-card {
  background: var(--sg-white);
  border: 1px solid var(--sg-secondary-200);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: all .2s;
}
.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.stat-card .stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--sg-secondary-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--sg-secondary-900);
  line-height: 1.2;
}
.stat-card .stat-sub {
  font-size: 12px;
  color: var(--sg-secondary-400);
  margin-top: 8px;
}
.stat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-card-icon.navy { background: var(--sg-primary-50); }
.stat-card-icon.navy .material-symbols-rounded { color: var(--sg-primary); }
.stat-card-icon.gold { background: var(--sg-secondary-50); }
.stat-card-icon.gold .material-symbols-rounded { color: var(--sg-secondary); }
.stat-card-icon.success { background: var(--sg-success-50); }
.stat-card-icon.success .material-symbols-rounded { color: var(--sg-success); }
.stat-card-icon.warning { background: var(--sg-warning-50); }
.stat-card-icon.warning .material-symbols-rounded { color: var(--sg-warning); }
.stat-card-icon.error { background: var(--sg-error-50); }
.stat-card-icon.error .material-symbols-rounded { color: var(--sg-error); }
.stat-card-icon.info { background: var(--sg-info-50); }
.stat-card-icon.info .material-symbols-rounded { color: var(--sg-info); }

/* ── Status indicators ── */
.status-paid    { background-color: var(--sg-success-50); color: var(--sg-success); border: 1px solid var(--sg-success-50); }
.status-pending { background-color: var(--sg-warning-50); color: var(--sg-warning); border: 1px solid var(--sg-warning-50); }
.status-overdue { background-color: var(--sg-error-50); color: var(--sg-error); border: 1px solid var(--sg-error-50); }

/* ── Chart default colors ── */
.chart-primary { background-color: var(--sg-primary); }
.chart-secondary { background-color: var(--sg-secondary-400); }
.chart-gold { background-color: var(--sg-secondary); }
.chart-success { background-color: var(--sg-success); }
.chart-warning { background-color: var(--sg-warning); }
.chart-error { background-color: var(--sg-error); }