/* =========================================================
   THEME TOKENS (per mode) + GLOBAL COMPONENT STYLES
   Adapted to Payloan palette
   ========================================================= */

/* ---------- LIGHT MODE ---------- */
html[data-theme-mode="light"] {
  /* First paint */
  --default-background: #F3F3FA;                 /* subtle lilac surface */
  --default-text-color: #383C5E;                 /* title/dark text */

  /* Brand + accents (Payloan) */
  --primary-rgb: 129, 128, 224 !important;       /* #8180E0 */
  --primary-color: rgb(var(--primary-rgb)) !important;
  --primary-border: rgb(var(--primary-rgb)) !important;

  --cta-rgb: 46, 55, 136 !important;             /* #2E3788 deep indigo */
  --cta-color: rgb(var(--cta-rgb)) !important;

  /* Links */
  --link-color: rgb(var(--primary-rgb)) !important;  /* #8180E0 */
  --link-hover: #373F91 !important;                  /* link ink */

  /* Header / Menu */
  --header-bg: #2E3788 !important;               /* deep indigo */
  --header-prime-color: #FFFFFF !important;
  --menu-bg: #2E3788 !important;
  --menu-border-color: #C86BD8 !important;       /* magenta accent */
  --menu-prime-color: #FFFFFF !important;

  /* Components */
  --card-bg: #FFFFFF;
  --card-border: #E1E1F5 !important;             /* soft border */
  --card-shadow-rgb: 129, 128, 224;              /* brand-tinted shadow */
  --breadcrumb-border: var(--primary-color);

  /* Readability */
  --btn-on-primary: #FFFFFF;
  --btn-on-accent: #FFFFFF;
  --btn-on-warning: #27282C;
  --btn-on-danger: #FFFFFF;
  --btn-on-info: #FFFFFF;

  /* State palette (mapped to Payloan) */
  --success: #4FB32C !important;                 /* Payloan green */
  --info:    #373F91 !important;                 /* ink/indigo-blue */
  --warning: #FFA200 !important;                 /* rating orange */
  --error:   #DB5541 !important;                 /* keep strong red for clarity */

  /* Focus ring (brand tint) */
  --focus-outline: 2px solid rgba(129,128,224,0.55);
}

/* ---------- DARK MODE ---------- */
html[data-theme-mode="dark"] {
  /* First paint (keep your dark neutrals for contrast) */
  --default-background: #1e293b;
  --default-text-color: #cbd5e1;

  /* Components */
  --card-bg: #0F213A;
  --card-border: rgba(129,128,224,0.20);         /* brand-tinted border */
  --card-shadow-rgb: 0, 0, 0;
  --breadcrumb-border: var(--primary-color);

  /* Brand + accents */
  --primary-rgb: 129, 128, 224 !important;       /* #8180E0 */
  --primary-color: rgb(var(--primary-rgb)) !important;
  --primary-border: rgb(var(--primary-rgb)) !important;

  --cta-rgb: 46, 55, 136 !important;             /* #2E3788 */
  --cta-color: rgb(var(--cta-rgb)) !important;

  /* Links */
  --link-color: rgb(var(--primary-rgb)) !important;
  --link-hover: #D6A8EC !important;              /* lighter lilac for dark hover */

  /* Header / Menu */
  --header-bg: #2E3788 !important;
  --header-prime-color: #FFFFFF !important;
  --menu-bg: #2E3788 !important;
  --menu-border-color: #C86BD8 !important;
  --menu-prime-color: #FFFFFF !important;

  /* Card header visibility */
  --card-header-bg: var(--card-bg, #0F213A);
  --card-header-color: var(--header-prime-color);

  /* States */
  --success: #4FB32C !important;
  --info:    #373F91 !important;
  --warning: #FFA200 !important;
  --error:   #DB5541 !important;

  /* Readability on colored surfaces */
  --btn-on-primary: #FFFFFF;
  --btn-on-accent: #FFFFFF;
  --btn-on-warning: #0F172A;
  --btn-on-danger: #FFFFFF;
  --btn-on-info: #FFFFFF;

  /* Focus ring */
  --focus-outline: 2px solid rgba(129,128,224,0.65);
}

/* =========================================================
   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 10px rgba(var(--card-shadow-rgb), 0.15);
}
.card.custom-card .card-header {
  background-color: var(--card-header-bg) !important;
  color: var(--card-header-color) !important;
}

/* Buttons */
.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(1.05); }

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

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

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

.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); }

/* Force colorized header/menu off brand tokens if needed */
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: #FFFFFF !important; }