/* Brand-aware CSS classes using CSS custom properties */

/* Text Colors */
.text-brand-text-primary {
  color: var(--text-primary, #111827);
}

.text-brand-text-secondary {
  color: var(--text-secondary, #6b7280);
}

.text-brand-text-muted {
  color: var(--text-muted, #9ca3af);
}

/* Background Colors */
.bg-brand-page-bg {
  background-color: var(--bg-page, #f9fafb);
}

.bg-brand-content-container-bg {
  background-color: var(--bg-content-container, #ffffff);
}

.bg-brand-header-bg {
  background-color: var(--bg-header, #ffffff);
}

.bg-brand-content-bg {
  background-color: var(--bg-main-content, #ffffff);
}

/* Form Field Background */
.bg-brand-form-field-bg {
  background-color: var(--bg-form-field, #ffffff);
}

.bg-brand-card-bg {
  background-color: var(--bg-content-cards, #ffffff);
}

.bg-brand-footer-bg {
  background-color: var(--bg-footer, #f9fafb);
}

/* Accent Colors */
.text-brand-accent-primary {
  color: var(--accent-primary, #3b82f6);
}

.text-brand-accent-success {
  color: var(--accent-success, #10b981);
}

.border-brand-accent-border {
  border-color: var(--accent-border, #3b82f6);
}

/* Border Colors */
.border-brand-border {
  border-color: var(--border-subtle, #e5e7eb);
}

/* Button Colors - Primary */
.bg-brand-btn-primary-bg {
  background-color: var(--btn-primary-bg, #3b82f6);
}

.text-brand-btn-primary-text {
  color: var(--btn-primary-text, #ffffff);
}

.hover\:bg-brand-btn-primary-hover-bg:hover {
  background-color: var(--btn-primary-hover-bg, #2563eb);
}

.hover\:text-brand-btn-primary-hover-text:hover {
  color: var(--btn-primary-hover-text, #ffffff);
}

/* Button Colors - Secondary */
.bg-brand-btn-secondary-bg {
  background-color: var(--btn-secondary-bg, #ffffff);
}

.text-brand-btn-secondary-text {
  color: var(--btn-secondary-text, #3b82f6);
}

.hover\:bg-brand-btn-secondary-hover-bg:hover {
  background-color: var(--btn-secondary-hover-bg, #f8fafc);
}

.hover\:text-brand-btn-secondary-hover-text:hover {
  color: var(--btn-secondary-hover-text, #2563eb);
}
.border-brand-btn-secondary-bg {
  border-color: var(--btn-secondary-bg, #ffffff);
}
.hover\:border-brand-btn-secondary-hover-bg:hover {
  border-color: var(--btn-secondary-hover-bg, #f8fafc);
}

/* Button Colors - Success */
.bg-brand-btn-success-bg {
  background-color: var(--btn-success-bg, #10b981);
}

.text-brand-btn-success-text {
  color: var(--btn-success-text, #ffffff);
}

.hover\:bg-brand-btn-success-hover-bg:hover {
  background-color: var(--btn-success-hover-bg, #059669);
}

.hover\:text-brand-btn-success-hover-text:hover {
  color: var(--btn-success-hover-text, #ffffff);
}

/* Button Colors - Danger */
.bg-brand-btn-danger-bg {
  background-color: var(--btn-danger-bg, #ef4444);
}

.text-brand-btn-danger-text {
  color: var(--btn-danger-text, #ffffff);
}

.hover\:bg-brand-btn-danger-hover-bg:hover {
  background-color: var(--btn-danger-hover-bg, #dc2626);
}

.hover\:text-brand-btn-danger-hover-text:hover {
  color: var(--btn-danger-hover-text, #ffffff);
}

/* Dropdown & Interactive Element Colors */
.bg-brand-dropdown-bg {
  background-color: var(--dropdown-bg, #ffffff);
}

.text-brand-dropdown-text {
  color: var(--dropdown-text, #111827);
}

.border-brand-dropdown-border {
  border-color: var(--dropdown-border, #d1d5db);
}

.hover\:bg-brand-dropdown-hover-bg:hover {
  background-color: var(--dropdown-hover-bg, #f3f4f6);
}

.hover\:text-brand-dropdown-hover-text:hover {
  color: var(--dropdown-hover-text, #111827);
}

.bg-brand-dropdown-option-hover-bg {
  background-color: var(--dropdown-option-hover-bg, #e5e7eb);
}

.text-brand-dropdown-option-hover-text {
  color: var(--dropdown-option-hover-text, #111827);
}

.hover\:bg-brand-dropdown-option-hover-bg:hover {
  background-color: var(--dropdown-option-hover-bg, #e5e7eb);
}

.hover\:text-brand-dropdown-option-hover-text:hover {
  color: var(--dropdown-option-hover-text, #111827);
}

/* Global dropdown styling - applies brand colors to all <select> elements */
select {
  background-color: var(--dropdown-bg, #ffffff);
  color: var(--dropdown-text, #111827);
  border-color: var(--dropdown-border, #d1d5db);
  border-radius: var(--form-border-radius, 4px);
}

select:hover {
  background-color: var(--dropdown-hover-bg, #f3f4f6);
  color: var(--dropdown-hover-text, #111827);
}

select:focus {
  border-color: var(--accent-primary, #3b82f6);
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Dropdown option styling (limited browser support but works in Chrome/Edge) */
select option {
  background-color: var(--dropdown-bg, #ffffff);
  color: var(--dropdown-text, #111827);
}

select option:hover {
  background-color: var(--dropdown-option-hover-bg, #e5e7eb);
  color: var(--dropdown-option-hover-text, #111827);
}


/* Notification Colors */
.bg-brand-notification-success {
  background-color: rgba(16, 185, 129, 0.1);
}

.text-brand-notification-success {
  color: var(--accent-success, #10b981);
}

.border-brand-notification-success {
  border-color: var(--accent-success, #10b981);
}

.bg-brand-notification-error {
  background-color: rgba(239, 68, 68, 0.1);
}

.text-brand-notification-error {
  color: var(--btn-danger-bg, #ef4444);
}

.border-brand-notification-error {
  border-color: var(--btn-danger-bg, #ef4444);
}

.bg-brand-notification-info {
  background-color: rgba(59, 130, 246, 0.1);
}

.text-brand-notification-info {
  color: var(--accent-primary, #3b82f6);
}

.border-brand-notification-info {
  border-color: var(--accent-primary, #3b82f6);
}

.bg-brand-notification-warning {
  background-color: rgba(245, 158, 11, 0.1);
}

.text-brand-notification-warning {
  color: var(--accent-warning, #f59e0b);
}

.border-brand-notification-warning {
  border-color: var(--accent-warning, #f59e0b);
}

/* Placeholder Colors */
.placeholder-brand-text-muted::placeholder {
  color: var(--text-muted, #9ca3af);
}

/* =============================================================================
   BRAND SPACING SYSTEM
   ============================================================================= */

/* Brand Spacing Scale - Based on 4px grid system */
.brand-space-xs { --space: 0.25rem; }  /* 4px - Tiny gaps */
.brand-space-sm { --space: 0.5rem; }   /* 8px - Small gaps */
.brand-space-md { --space: 1rem; }     /* 16px - Standard gaps */
.brand-space-lg { --space: 1.5rem; }   /* 24px - Large gaps */
.brand-space-xl { --space: 2rem; }     /* 32px - Extra large gaps */
.brand-space-2xl { --space: 3rem; }    /* 48px - Section spacing */

/* Margin Classes */
.brand-m-xs { margin: var(--space-xs, 0.25rem); }
.brand-m-sm { margin: var(--space-sm, 0.5rem); }
.brand-m-md { margin: var(--space-md, 1rem); }
.brand-m-lg { margin: var(--space-lg, 1.5rem); }
.brand-m-xl { margin: var(--space-xl, 2rem); }
.brand-m-2xl { margin: var(--space-2xl, 3rem); }

/* Margin Bottom - Most commonly used */
.brand-mb-xs { margin-bottom: var(--space-xs, 0.25rem); }
.brand-mb-sm { margin-bottom: var(--space-sm, 0.5rem); }
.brand-mb-md { margin-bottom: var(--space-md, 1rem); }
.brand-mb-lg { margin-bottom: var(--space-lg, 1.5rem); }
.brand-mb-xl { margin-bottom: var(--space-xl, 2rem); }
.brand-mb-2xl { margin-bottom: var(--space-2xl, 3rem); }

/* Margin Top */
.brand-mt-xs { margin-top: var(--space-xs, 0.25rem); }
.brand-mt-sm { margin-top: var(--space-sm, 0.5rem); }
.brand-mt-md { margin-top: var(--space-md, 1rem); }
.brand-mt-lg { margin-top: var(--space-lg, 1.5rem); }
.brand-mt-xl { margin-top: var(--space-xl, 2rem); }
.brand-mt-2xl { margin-top: var(--space-2xl, 3rem); }

/* Margin Right */
.brand-mr-xs { margin-right: var(--space-xs, 0.25rem); }
.brand-mr-sm { margin-right: var(--space-sm, 0.5rem); }
.brand-mr-md { margin-right: var(--space-md, 1rem); }
.brand-mr-lg { margin-right: var(--space-lg, 1.5rem); }
.brand-mr-xl { margin-right: var(--space-xl, 2rem); }
.brand-mr-2xl { margin-right: var(--space-2xl, 3rem); }

/* Margin Left */
.brand-ml-xs { margin-left: var(--space-xs, 0.25rem); }
.brand-ml-sm { margin-left: var(--space-sm, 0.5rem); }
.brand-ml-md { margin-left: var(--space-md, 1rem); }
.brand-ml-lg { margin-left: var(--space-lg, 1.5rem); }
.brand-ml-xl { margin-left: var(--space-xl, 2rem); }
.brand-ml-2xl { margin-left: var(--space-2xl, 3rem); }

/* Padding Classes */
.brand-p-xs { padding: var(--space-xs, 0.25rem); }
.brand-p-sm { padding: var(--space-sm, 0.5rem); }
.brand-p-md { padding: var(--space-md, 1rem); }
.brand-p-lg { padding: var(--space-lg, 1.5rem); }
.brand-p-xl { padding: var(--space-xl, 2rem); }
.brand-p-2xl { padding: var(--space-2xl, 3rem); }

/* Gap Classes for Flexbox/Grid */
.brand-gap-xs { gap: var(--space-xs, 0.25rem); }
.brand-gap-sm { gap: var(--space-sm, 0.5rem); }
.brand-gap-md { gap: var(--space-md, 1rem); }
.brand-gap-lg { gap: var(--space-lg, 1.5rem); }
.brand-gap-xl { gap: var(--space-xl, 2rem); }
.brand-gap-2xl { gap: var(--space-2xl, 3rem); }

/* =============================================================================
   BRAND BORDER SYSTEM
   ============================================================================= */

/* Border Weights */
.brand-border-thin {
  border: var(--border-width-thin, 1px) solid var(--border-subtle, #e5e7eb);
}

.brand-border-medium {
  border: var(--border-width-medium, 2px) solid var(--border-subtle, #e5e7eb);
}

.brand-border-thick {
  border: var(--border-width-thick, 3px) solid var(--border-subtle, #e5e7eb);
}

/* Border Styles with Brand Colors */
.brand-border-accent-thin {
  border: var(--border-width-thin, 1px) solid var(--accent-primary, #3b82f6);
}

.brand-border-accent-medium {
  border: var(--border-width-medium, 2px) solid var(--accent-primary, #3b82f6);
}

.brand-border-accent-thick {
  border: var(--border-width-thick, 3px) solid var(--accent-primary, #3b82f6);
}

/* Border Radius Classes (unified to global brand radius) */
.brand-rounded-sm { border-radius: var(--brand-border-radius, 8px); }
.brand-rounded-md { border-radius: var(--brand-border-radius, 8px); }
.brand-rounded-lg { border-radius: var(--brand-border-radius, 8px); }
.brand-rounded-xl { border-radius: var(--brand-border-radius, 8px); }

/* Override Tailwind rounded utilities to follow global brand radius */
.rounded,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl {
  border-radius: var(--brand-border-radius, 8px) !important;
}

/* Ensure form controls follow dedicated form radius */
input,
select,
textarea,
button {
  border-radius: var(--form-border-radius, 4px) !important;
}

/* Directional rounded utilities follow global brand radius */
/* Top */
.rounded-t,
.rounded-t-sm,
.rounded-t-md,
.rounded-t-lg,
.rounded-t-xl {
  border-top-left-radius: var(--brand-border-radius, 8px) !important;
  border-top-right-radius: var(--brand-border-radius, 8px) !important;
}
/* Bottom */
.rounded-b,
.rounded-b-sm,
.rounded-b-md,
.rounded-b-lg,
.rounded-b-xl {
  border-bottom-left-radius: var(--brand-border-radius, 8px) !important;
  border-bottom-right-radius: var(--brand-border-radius, 8px) !important;
}
/* Left */
.rounded-l,
.rounded-l-sm,
.rounded-l-md,
.rounded-l-lg,
.rounded-l-xl {
  border-top-left-radius: var(--brand-border-radius, 8px) !important;
  border-bottom-left-radius: var(--brand-border-radius, 8px) !important;
}
/* Right */
.rounded-r,
.rounded-r-sm,
.rounded-r-md,
.rounded-r-lg,
.rounded-r-xl {
  border-top-right-radius: var(--brand-border-radius, 8px) !important;
  border-bottom-right-radius: var(--brand-border-radius, 8px) !important;
}
/* Individual corners */
.rounded-tl,
.rounded-tl-sm,
.rounded-tl-md,
.rounded-tl-lg,
.rounded-tl-xl {
  border-top-left-radius: var(--brand-border-radius, 8px) !important;
}
.rounded-tr,
.rounded-tr-sm,
.rounded-tr-md,
.rounded-tr-lg,
.rounded-tr-xl {
  border-top-right-radius: var(--brand-border-radius, 8px) !important;
}
.rounded-br,
.rounded-br-sm,
.rounded-br-md,
.rounded-br-lg,
.rounded-br-xl {
  border-bottom-right-radius: var(--brand-border-radius, 8px) !important;
}
.rounded-bl,
.rounded-bl-sm,
.rounded-bl-md,
.rounded-bl-lg,
.rounded-bl-xl {
  border-bottom-left-radius: var(--brand-border-radius, 8px) !important;
}

/* =============================================================================
   BRAND COMPONENT SPACING PATTERNS
   ============================================================================= */

/* Page Container */
.brand-page-container {
  padding: var(--space-lg, 1.5rem);
  margin-bottom: var(--space-2xl, 3rem);
}

/* Section Spacing */
.brand-section {
  margin-bottom: var(--space-2xl, 3rem);
}

.brand-section-header {
  margin-bottom: var(--space-lg, 1.5rem);
}

/* Card Spacing */
.brand-card {
  padding: var(--space-lg, 1.5rem);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--brand-border-radius, 8px);
  margin-bottom: var(--space-lg, 1.5rem);
}

.brand-card-compact {
  padding: var(--space-md, 1rem);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--brand-border-radius, 8px);
  margin-bottom: var(--space-md, 1rem);
}

/* Grid Spacing */
.brand-grid-gap {
  gap: var(--space-lg, 1.5rem);
}

.brand-grid-gap-sm {
  gap: var(--space-md, 1rem);
}

/* Button Spacing */
.brand-btn-spacing {
  padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  margin: var(--space-xs, 0.25rem);
}

.brand-btn-spacing-lg {
  padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
  margin: var(--space-sm, 0.5rem);
}

/* Additional Brand Text Classes */
.text-brand-text-disabled {
  color: var(--text-disabled, #9ca3af);
}

.text-brand-text-placeholder {
  color: var(--text-placeholder, #6b7280);
}

/* Additional Brand Background Classes */
.bg-brand-bg-subtle {
  background-color: var(--bg-subtle, #f9fafb);
}

.bg-brand-bg-hover {
  background-color: var(--bg-hover, #f3f4f6);
}

.hover\:bg-brand-bg-hover:hover {
  background-color: var(--bg-hover, #f3f4f6);
}

/* Additional Brand Border Classes */
.border-brand-border-subtle {
  border-color: var(--border-subtle, #f3f4f6);
}