/* =========================================================
   THEME TOKENS (per mode) + GLOBAL COMPONENT STYLES
   ========================================================= */

/* ---------- LIGHT MODE (BLUE → BLUE-GREEN + AQUAMARINE) ---------- */
html[data-theme-mode="light"] {
  /* Page */
  --default-background: #EEF5FF;  /* pale blue */
  --default-text-color: #0B1220;  /* slate */

  /* Surfaces */
  --card-bg: #FFFFFF;
  --card-border: rgba(59, 130, 246, 0.35) !important;
  --card-shadow-rgb: 59, 130, 246;
  --breadcrumb-border: rgba(59, 130, 246, 0.65);

  /* Brand tokens (match dark mode theme) */
  --primary-rgb: 37, 99, 235 !important;           /* #2563EB blue */
  --primary-color: rgb(var(--primary-rgb)) !important;
  --primary-border: rgb(var(--primary-rgb)) !important;

  --secondary-rgb: 6, 182, 212 !important;         /* #06B6D4 cyan */
  --secondary-color: rgb(var(--secondary-rgb)) !important;
  --secondary-border: rgba(var(--secondary-rgb), 0.70) !important;

  --cta-rgb: 45, 212, 191 !important;              /* #2DD4BF aquamarine */
  --cta-color: rgb(var(--cta-rgb)) !important;

  /* Links */
  --link-color: rgb(var(--primary-rgb)) !important;
  --link-hover: #1D4ED8 !important;                /* blue-700 */

  /* Header / Menu */
  --header-bg: #2563EB !important;
  --header-prime-color: #FFFFFF !important;
  --menu-bg: #2563EB !important;
  --menu-border-color: rgba(var(--secondary-rgb), 0.55) !important;
  --menu-prime-color: #FFFFFF !important;

  /* Card header */
  --card-header-bg: var(--card-bg, #FFFFFF);
  --card-header-color: var(--default-text-color);

  /* Buttons: text on color */
  --btn-on-primary: #FFFFFF;
  --btn-on-accent: #042F2E;  /* deep teal text on aquamarine */
  --btn-on-warning: #27282C;
  --btn-on-danger: #FFFFFF;
  --btn-on-info: #0F172A;

  /* State palette */
  --success: #16A34A !important;
  --info:    #0EA5E9 !important;
  --warning: #F59E0B !important;
  --error:   #E11D48 !important;

  --btn-on-success: #FFFFFF !important;
  --btn-on-info:    #0F172A !important;
}


/* ---------- DARK MODE (BLUE → BLUE-GREEN + AQUAMARINE) ---------- */
html[data-theme-mode="dark"] {
  /* First paint (cool blue front, sea-glass depth) */
  --default-background: radial-gradient(1200px 700px at 20% 0%, rgba(45, 212, 191, 0.22), rgba(6, 8, 21, 0.98) 55%),
                        radial-gradient(900px 600px at 90% 15%, rgba(34, 211, 238, 0.14), rgba(6, 8, 21, 0) 60%),
                        #060815;
  --default-text-color: #E6E9FF;

  /* Surfaces */
  --card-bg: #0B1024;
  --card-border: rgba(34, 211, 238, 0.22);
  --card-shadow-rgb: 34, 211, 238;

  /* Brand tokens */
  --primary-rgb: 59, 130, 246 !important;           /* #3B82F6 blue (lighter) */
  --primary-color: rgb(var(--primary-rgb)) !important;
  --primary-border: rgba(var(--primary-rgb), 0.72) !important;

  --secondary-rgb: 34, 211, 238 !important;         /* #22D3EE cyan (brighter) */
  --secondary-color: rgb(var(--secondary-rgb)) !important;
  --secondary-border: rgba(var(--secondary-rgb), 0.72) !important;

  /* Accent (aquamarine) */
  --cta-rgb: 45, 212, 191 !important;               /* #2DD4BF aquamarine */
  --cta-color: rgb(var(--cta-rgb)) !important;

  /* Links */
  --link-color: rgba(var(--primary-rgb), 0.95) !important;
  --link-hover: #93C5FD !important;                 /* blue-300 */

  /* Header / Menu */
  --header-bg: #070A18 !important;
  --header-prime-color: #EEF2FF !important;
  --menu-bg: #070A18 !important;
  --menu-border-color: rgba(var(--secondary-rgb), 0.32) !important;
  --menu-prime-color: #EEF2FF !important;

  /* Card header */
  --card-header-bg: linear-gradient(
    180deg,
    rgba(var(--secondary-rgb), 0.14),
    rgba(0, 0, 0, 0)
  );
  --card-header-color: var(--header-prime-color);

  /* State palette */
  --success: #22C55E !important;
  --info:    #38BDF8 !important;
  --warning: #FBBF24 !important;
  --error:   #FB7185 !important;

  /* On-color text */
  --btn-on-primary: #06101B;
  --btn-on-accent:  #06101B;
  --btn-on-warning: #0B0F17;
  --btn-on-danger:  #FFFFFF;
  --btn-on-info:    #06101B;
  --btn-on-success: #06101B !important;

  --focus-outline: 2px solid rgba(var(--cta-rgb), 0.80);
}





/* =========================================================
   GLOBAL COMPONENT STYLES
   ========================================================= */

/* Page shell */
body {
  background: var(--default-background);
  color: var(--default-text-color);
}

/* Breadcrumb underline + active crumb */
.page-header-breadcrumb { border-bottom: 2px solid var(--breadcrumb-border); }
.breadcrumb-item.active { color: var(--cta-color); }

/* Cards */
.card.custom-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 2px 6px rgba(var(--card-shadow-rgb), 0.18);
}
.card.custom-card .card-header {
  background-color: var(--card-header-bg) !important;
  color: var(--card-header-color) !important;
}

/* Buttons (Bootstrap-compatible names + extras) */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-border);
  color: var(--btn-on-primary);
}
.btn-primary:is(:hover, :focus) {
  background-color: var(--link-hover);
  border-color: var(--link-hover);
}

.btn-accent {
  background-color: var(--cta-color);
  border-color: var(--cta-color);
  color: var(--btn-on-accent);
}
.btn-accent:is(:hover, :focus) { filter: brightness(0.95); }

.btn-warning {
  background-color: var(--warning);
  border-color: var(--warning);
  color: var(--btn-on-warning);
}
.btn-warning:is(:hover, :focus) { filter: brightness(0.95); }

.btn-danger {
  background-color: var(--error);
  border-color: var(--error);
  color: var(--btn-on-danger);
}
.btn-danger:is(:hover, :focus) { filter: brightness(0.95); }

.btn-info {
  background-color: var(--info);
  border-color: var(--info);
  color: var(--btn-on-info);
}
.btn-info:is(:hover, :focus) { filter: brightness(0.96); }

.btn-dark {
  background-color: var(--header-bg);
  border-color: var(--header-bg);
  color: var(--header-prime-color);
}
.btn-dark:is(:hover, :focus) { filter: brightness(1.05); }

/* Focus ring */
:where(button, [href], input, select, textarea):focus-visible { outline: var(--focus-outline); }

/* Links */
a { color: var(--link-color); }
a:hover { color: var(--link-hover); }

/* Optional helpers to force colorized header/menu off brand tokens */
html[data-header-styles="color"] { --header-bg: rgb(var(--primary-rgb)) !important; }
html[data-menu-styles="color"]   { --menu-bg:   rgb(var(--primary-rgb)) !important; }

.icon-white {
  color: #fff !important;
}

/* =========================================================
   Contrast fixes
   ========================================================= */

/* Ensure <code> inside badges inherits the badge text color. */
.badge code {
  color: inherit !important;
}

/* In dark mode, force .text-dark badges to actual dark text for readability. */
html[data-theme-mode="dark"] .badge.text-dark {
  color: #0b1220 !important;
}


/* ===== THEME DEMO HELPERS ===== */
.text-token-primary   { color: var(--primary-color) !important; }
.text-token-secondary { color: var(--secondary-color) !important; }
.text-token-accent    { color: var(--cta-color) !important; }

.badge-primary   { background: var(--primary-color) !important; color: var(--btn-on-primary) !important; }
.badge-secondary { background: var(--secondary-color) !important; color: #0B0F17 !important; }
.badge-accent    { background: var(--cta-color) !important; color: var(--btn-on-accent) !important; }

.btn-secondary {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-border) !important;
  color: #0B0F17 !important;
}
.btn-secondary:is(:hover, :focus) { filter: brightness(1.06); }

.btn-outline-accent {
  background: transparent !important;
  border: 1px solid rgba(var(--cta-rgb), 0.75) !important;
  color: var(--cta-color) !important;
}
.btn-outline-accent:is(:hover, :focus) {
  background: rgba(var(--cta-rgb), 0.12) !important;
}