/* ============================================================
   THEME UTILITY CLASSES — NexiBook / Insightful Booking
   Replacements for hardcoded Bootstrap color classes
   (text-white, bg-dark, text-muted, etc.)

   These classes use the design-system CSS variables so they
   automatically adapt when the theme switches between
   dark (default) and light modes.

   Variable sources:
     tokens.css   → --color-*  (design-system canonical)
     sintra-theme → --nb-*     (legacy / premium dashboard)

   Both variable families are referenced with fallbacks so
   the utilities work regardless of which stylesheet loaded.
   ============================================================ */

/* ============================================================
   1. BACKGROUND UTILITIES
   ============================================================ */

/* Page / body background */
.nb-bg {
  background-color: var(--nb-bg, var(--color-bg, #12121a));
}

/* Secondary / alternate background (e.g. sections, sidebars) */
.nb-bg-alt {
  background-color: var(--color-bg-secondary, var(--nb-card, #1a1a24));
}

/* Card background */
.nb-card-bg {
  background-color: var(--nb-card, var(--color-bg-elevated, #1a1a24));
}

/* Elevated card background (hover / raised cards) */
.nb-card-bg-elevated {
  background-color: var(--nb-card-elevated, var(--color-bg-elevated, #1e1e2a));
}

/* Surface / glass tint background */
.nb-surface {
  background-color: var(--nb-surface, var(--glass-bg, rgba(200, 200, 240, 0.04)));
}

/* Tertiary background */
.nb-bg-tertiary {
  background-color: var(--color-bg-tertiary, #22222e);
}

/* ============================================================
   2. TEXT UTILITIES
   ============================================================ */

/* Primary body text — replaces text-white / text-dark */
.nb-text {
  color: var(--nb-fg, var(--color-text, #f0f0f5));
}

/* Headings — same as primary but semantic separation */
.nb-heading {
  color: var(--nb-fg, var(--color-text, #f0f0f5));
}

/* Muted text — replaces text-muted */
.nb-text-muted {
  color: var(--nb-muted, var(--color-text-secondary, #b0b0be));
}

/* Subtle / very muted text — replaces text-secondary */
.nb-text-subtle {
  color: var(--color-text-muted, #78788a);
}

/* Inverse text (for gold buttons, etc.) */
.nb-text-inverse {
  color: var(--color-text-inverse, var(--color-primary-text, #12121a));
}

/* ============================================================
   3. ACCENT / BRAND TEXT
   ============================================================ */

/* Gold accent — replaces inline gold color */
.nb-gold {
  color: var(--nb-gold, var(--color-primary, #ffd700));
}

/* Gold strong (hover shade) */
.nb-gold-strong {
  color: var(--nb-gold-strong, var(--color-primary-hover, #f0c050));
}

/* Success / error / warning / info — semantic text */
.nb-text-success { color: var(--color-success, var(--nb-green, #22C55E)); }
.nb-text-error   { color: var(--color-error, var(--nb-red, #EF4444)); }
.nb-text-warning { color: var(--color-warning, var(--nb-orange, #F59E0B)); }
.nb-text-info    { color: var(--color-info, var(--nb-blue, #3B82F6)); }

/* ============================================================
   4. BORDER UTILITIES
   ============================================================ */

/* Default border — replaces border-secondary, border-dark */
.nb-border {
  border-color: var(--nb-border, var(--color-border, rgba(200, 200, 240, 0.15)));
}

/* Strong / emphasis border */
.nb-border-strong {
  border-color: var(--nb-border-strong, var(--color-border, rgba(200, 200, 240, 0.22)));
}

/* Light / subtle border */
.nb-border-light {
  border-color: var(--color-border-light, rgba(200, 200, 240, 0.08));
}

/* Gold accent border */
.nb-border-gold {
  border-color: var(--color-gold-border, rgba(255, 215, 0, 0.3));
}

/* ============================================================
   5. BACKGROUND ACCENT UTILITIES
   ============================================================ */

/* Gold background (buttons, badges) */
.nb-bg-gold {
  background-color: var(--nb-gold, var(--color-primary, #ffd700));
  color: var(--color-primary-text, #111111);
}

/* Gold glow / subtle gold tint */
.nb-bg-gold-glow {
  background-color: var(--nb-gold-glow, var(--color-primary-light, rgba(255, 215, 0, 0.12)));
}

/* Semantic backgrounds */
.nb-bg-success { background-color: var(--color-success-light, rgba(34, 197, 94, 0.15)); }
.nb-bg-error   { background-color: var(--color-error-light, rgba(239, 68, 68, 0.15)); }
.nb-bg-warning { background-color: var(--color-warning-light, rgba(245, 158, 11, 0.15)); }
.nb-bg-info    { background-color: var(--color-info-light, rgba(59, 130, 246, 0.15)); }

/* ============================================================
   6. SHADOW UTILITIES
   ============================================================ */

.nb-shadow-sm { box-shadow: var(--shadow-sm); }
.nb-shadow-md { box-shadow: var(--shadow-md); }
.nb-shadow-lg { box-shadow: var(--shadow-lg); }
.nb-shadow-xl { box-shadow: var(--shadow-xl); }
.nb-shadow-gold { box-shadow: var(--shadow-gold); }

/* ============================================================
   7. LIGHT THEME OVERRIDES
   The --nb-* and --color-* variables already update via
   [data-theme="light"] and html.theme-light selectors in
   tokens.css / sintra-theme.css. These explicit overrides
   guarantee correct fallback values when only the utility
   class is present (i.e. no tokens.css loaded).
   ============================================================ */

/* --- data-theme attribute selector --- */

[data-theme="light"] .nb-bg {
  background-color: var(--nb-bg, var(--color-bg, #FAFAF8));
}

[data-theme="light"] .nb-bg-alt {
  background-color: var(--color-bg-secondary, var(--nb-card, #F5F4F0));
}

[data-theme="light"] .nb-card-bg {
  background-color: var(--nb-card, var(--color-bg-elevated, #FFFFFF));
}

[data-theme="light"] .nb-card-bg-elevated {
  background-color: var(--nb-card-elevated, var(--color-bg-elevated, #FFFFFF));
}

[data-theme="light"] .nb-surface {
  background-color: var(--nb-surface, var(--glass-bg, rgba(15, 23, 42, 0.04)));
}

[data-theme="light"] .nb-bg-tertiary {
  background-color: var(--color-bg-tertiary, #EDECE8);
}

[data-theme="light"] .nb-text,
[data-theme="light"] .nb-heading {
  color: var(--nb-fg, var(--color-text, #1F2937));
}

[data-theme="light"] .nb-text-muted {
  color: var(--nb-muted, var(--color-text-secondary, #6B7280));
}

[data-theme="light"] .nb-text-subtle {
  color: var(--color-text-muted, #9CA3AF);
}

[data-theme="light"] .nb-text-inverse {
  color: var(--color-text-inverse, #FFFFFF);
}

[data-theme="light"] .nb-border {
  border-color: var(--nb-border, var(--color-border, #E5E4DF));
}

[data-theme="light"] .nb-border-strong {
  border-color: var(--nb-border-strong, var(--color-border, rgba(15, 23, 42, 0.16)));
}

[data-theme="light"] .nb-border-light {
  border-color: var(--color-border-light, #F0EFE8);
}

[data-theme="light"] .nb-gold {
  color: var(--nb-gold, var(--color-primary, #d4af37));
}

[data-theme="light"] .nb-gold-strong {
  color: var(--nb-gold-strong, var(--color-primary-hover, #caa400));
}

/* --- html.theme-light class selector (sintra-theme compat) --- */

.theme-light .nb-bg {
  background-color: var(--nb-bg, var(--color-bg, #e8e3dc));
}

.theme-light .nb-bg-alt {
  background-color: var(--color-bg-secondary, var(--nb-card, #F5F4F0));
}

.theme-light .nb-card-bg {
  background-color: var(--nb-card, var(--color-bg-elevated, #ffffff));
}

.theme-light .nb-card-bg-elevated {
  background-color: var(--nb-card-elevated, var(--color-bg-elevated, #ffffff));
}

.theme-light .nb-surface {
  background-color: var(--nb-surface, var(--glass-bg, rgba(15, 23, 42, 0.04)));
}

.theme-light .nb-bg-tertiary {
  background-color: var(--color-bg-tertiary, #EDECE8);
}

.theme-light .nb-text,
.theme-light .nb-heading {
  color: var(--nb-fg, var(--color-text, #0f1115));
}

.theme-light .nb-text-muted {
  color: var(--nb-muted, var(--color-text-secondary, #4b5563));
}

.theme-light .nb-text-subtle {
  color: var(--color-text-muted, #9CA3AF);
}

.theme-light .nb-text-inverse {
  color: var(--color-text-inverse, #FFFFFF);
}

.theme-light .nb-border {
  border-color: var(--nb-border, var(--color-border, rgba(15, 23, 42, 0.16)));
}

.theme-light .nb-border-strong {
  border-color: var(--nb-border-strong, var(--color-border, rgba(15, 23, 42, 0.16)));
}

.theme-light .nb-border-light {
  border-color: var(--color-border-light, #F0EFE8);
}

.theme-light .nb-gold {
  color: var(--nb-gold, var(--color-primary, #d4af37));
}

.theme-light .nb-gold-strong {
  color: var(--nb-gold-strong, var(--color-primary-hover, #caa400));
}

/* ============================================================
   8. QUICK-REFERENCE MAPPING
   ============================================================

   Bootstrap class          →  Theme utility replacement
   ─────────────────────────────────────────────────────────
   bg-dark                  →  nb-bg
   bg-secondary             →  nb-bg-alt
   bg-body / bg-light       →  nb-bg  (adapts per theme)
   card bg-dark             →  nb-card-bg
   text-white               →  nb-text
   text-dark                →  nb-text
   text-muted               →  nb-text-muted
   text-secondary           →  nb-text-subtle
   text-warning / gold      →  nb-gold
   border-secondary         →  nb-border
   border-dark              →  nb-border
   bg-warning (gold btn)    →  nb-bg-gold
   bg-success               →  nb-bg-success
   bg-danger                →  nb-bg-error
   shadow / shadow-sm       →  nb-shadow-sm / nb-shadow-md
   ============================================================ */