/* Default Theme - Professional B2B Light Theme */
@import url('base.css');

:root {
  /* Professional B2B Color System - Light Theme */

  /* Core B2B Palette using HSL for precision */
  --color-header: hsl(210 50% 75%);        /* professional blue - better contrast */
  --color-sidebar: hsl(210 20% 95%);       /* light cool slate */
  --color-content: hsl(210 15% 99%);       /* very light background */
  --color-card: hsl(0 0% 100%);            /* pure white cards for distinction */
  --color-footer: hsl(210 50% 75%);        /* professional blue - matches header */
  --color-text-default: hsl(222 47% 11%);  /* ink */
  --color-border: hsl(215 20% 85%);        /* soft gray */
  --color-accent: hsl(221 83% 53%);        /* confident blue */
  --color-on-accent: hsl(0 0% 100%);      /* white */

  /* Semantic Status Colors */
  --color-success: hsl(142 71% 45%);       /* green */
  --color-warning: hsl(38 92% 50%);        /* amber */
  --color-danger: hsl(0 84% 60%);          /* red */
  --color-info: hsl(210 100% 45%);         /* blue */

  /* Status Backgrounds (pale tints) */
  --color-success-bg: hsl(142 71% 95%);    /* pale green */
  --color-warning-bg: hsl(38 92% 95%);     /* pale amber */
  --color-danger-bg: hsl(0 84% 95%);       /* pale red */
  --color-info-bg: hsl(210 100% 95%);      /* pale blue */

  /* Regional Color Mapping */
  --nav-header-bg: var(--color-header);
  --nav-header-text: var(--color-text-default);
  --nav-header-text-hover: var(--color-accent);
  --nav-header-border: var(--color-border);

  --nav-sidebar-bg: var(--color-sidebar);
  --nav-sidebar-text: var(--color-text-default);
  --nav-sidebar-text-hover: var(--color-accent);
  --nav-sidebar-bg-hover: hsl(221 83% 97%);  /* accent tint +10% lightness */
  --nav-sidebar-border: var(--color-border);

  --footer-bg: var(--color-footer);
  --footer-text: hsl(222 47% 40%);          /* muted text */
  --footer-link: var(--color-accent);
  --footer-link-hover: hsl(221 83% 45%);    /* accent -8% lightness */

  --content-bg: var(--color-content);
  --page-bg: var(--color-content);
  --card-bg: var(--color-card);

  --badge-role-bg: hsl(221 83% 95%);        /* accent pale tint */
  --badge-role-text: var(--color-accent);

  /* Button Semantic Tokens */
  --btn-primary-bg: var(--color-accent);
  --btn-primary-hover: hsl(221 83% 45%);    /* accent -8% lightness */
  --btn-primary-text: var(--color-on-accent);

  --btn-utility-bg: hsl(210 20% 94%);       /* light gray for filters, etc */
  --btn-utility-hover: hsl(210 20% 90%);    /* darker on hover */
  --btn-utility-text: var(--color-text-default);

  --btn-secondary-bg: hsl(210 15% 45%);     /* medium gray for navigation */
  --btn-secondary-hover: hsl(210 15% 40%);  /* darker on hover */
  --btn-secondary-text: var(--color-on-accent);

  /* Card Header Semantic Tokens */
  --card-header-bg: var(--color-header);     /* match page header for consistency */
  --card-header-text: var(--color-text-default);

  /* Interactive States */
  --hover-lift: hsl(210 20% 95%);           /* +3% lightness from sidebar */
  --active-indicator: var(--color-accent);

  /* Professional shadows - thin borders preferred */
  --card-shadow: 0 1px 3px 0 hsl(222 47% 11% / 0.05);
  --border-width: 1px;

  /* Table colors for B2B */
  --table-row-hover: hsl(210 20% 96%);      /* -2% lightness */
  --table-row-selected: hsl(221 83% 96%);   /* accent tint */
  --table-header-bg: var(--color-card);

  /* Form colors */
  --input-bg: transparent;
  --input-border: var(--color-border);
  --input-focus-ring: var(--color-accent);
}

/* Tailwind CSS Overrides to ensure theme colors are applied */
.nav-header {
  background-color: var(--nav-header-bg) !important;
  color: var(--nav-header-text) !important;
}

.nav-sidebar {
  background-color: var(--nav-sidebar-bg) !important;
  color: var(--nav-sidebar-text) !important;
  border-color: var(--nav-sidebar-border) !important;
}

.nav-sidebar-item {
  color: var(--nav-sidebar-text) !important;
}

.nav-sidebar-item:hover {
  background-color: var(--nav-sidebar-bg-hover) !important;
  color: var(--nav-sidebar-text-hover) !important;
}

.nav-sidebar-active {
  background-color: var(--nav-sidebar-bg-hover) !important;
  color: var(--nav-sidebar-text-hover) !important;
  font-weight: 600 !important;
}

.nav-sidebar-active .nav-sidebar-icon {
  color: var(--nav-sidebar-text-hover) !important;
}

.footer {
  background-color: var(--footer-bg) !important;
  color: var(--footer-text) !important;
}

.content-area {
  background-color: var(--content-bg) !important;
}

.card {
  background-color: var(--card-bg, var(--content-bg)) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--card-shadow) !important;
}

.badge-role {
  background-color: var(--badge-role-bg) !important;
  color: var(--badge-role-text) !important;
}

/* Override gray backgrounds that might interfere */
.bg-gray-50 { background-color: var(--page-bg, var(--gray-50)) !important; }
.bg-gray-100 { background-color: var(--gray-100) !important; }

/* Semantic Button Classes */
.btn-primary {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
}
.btn-primary:hover {
  background-color: var(--btn-primary-hover) !important;
}

.btn-utility {
  background-color: var(--btn-utility-bg) !important;
  color: var(--btn-utility-text) !important;
}
.btn-utility:hover {
  background-color: var(--btn-utility-hover) !important;
}

.btn-secondary {
  background-color: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-text) !important;
}
.btn-secondary:hover {
  background-color: var(--btn-secondary-hover) !important;
}

/* Card Header Class */
.card-header {
  background-color: var(--card-header-bg) !important;
  color: var(--card-header-text) !important;
}

/* Professional Button Hierarchy - Tailwind Overrides using semantic tokens */
/* Primary CTAs only - Save, Submit, Sign In, etc */
.bg-indigo-600 { background-color: var(--btn-primary-bg) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--btn-primary-hover) !important; }

/* Secondary actions - Navigation, View All, etc */
.bg-gray-600 { background-color: var(--btn-secondary-bg) !important; }
.hover\:bg-gray-700:hover { background-color: var(--btn-secondary-hover) !important; }

/* Filter/utility buttons - light gray - using semantic tokens */
button.bg-gray-100, a.bg-gray-100, .bg-gray-100 { background-color: var(--btn-utility-bg) !important; }
button.bg-gray-100:hover, a.bg-gray-100:hover, .hover\:bg-gray-200:hover { background-color: var(--btn-utility-hover) !important; }
button.text-gray-800, a.text-gray-800, .text-gray-800 { color: var(--btn-utility-text) !important; }