/* ==========================================================================
   BTCPAY EXTENDED THEME
   Author: you
   Purpose: Map your Tailwind-ish palette to BTCPay + Bootstrap tokens
   Safe to paste in: Server Settings → Branding → Custom Theme CSS
   ========================================================================== */

/* === Base palette (from your spec) ======================================= */
:root {
  /* Neutral / background */
  --background-200: #000;
  --background-300: #030303;
  --background-400: #0d0d0d;
  --background-500: #1a1a1a;
  --background-600: #333333;
  --background-700: #4d4d4d;
  --background-800: #666666;
  --background-900: #808080;

  --background-transparent-200: rgba(0, 0, 0, 0.1);
  --background-transparent-300: rgba(0, 0, 0, 0.2);
  --background-transparent-400: rgba(0, 0, 0, 0.3);
  --background-transparent-500: rgba(0, 0, 0, 0.4);
  --background-transparent-600: rgba(0, 0, 0, 0.5);
  --background-transparent-700: rgba(0, 0, 0, 0.6);
  --background-transparent-800: rgba(0, 0, 0, 0.7);
  --background-transparent-900: rgba(0, 0, 0, 0.8);

  /* Foreground */
  --foreground-200: #ffffff;
  --foreground-300: #f2f2f2;
  --foreground-400: #e6e6e6;
  --foreground-500: #d9d9d9;
  --foreground-600: #b3b3b3;
  --foreground-700: #8c8c8c;
  --foreground-800: #666666;
  --foreground-900: #404040;

  --foreground-transparent-200: rgba(255, 255, 255, 0.1);
  --foreground-transparent-300: rgba(255, 255, 255, 0.2);
  --foreground-transparent-400: rgba(255, 255, 255, 0.3);
  --foreground-transparent-500: rgba(255, 255, 255, 0.4);
  --foreground-transparent-600: rgba(255, 255, 255, 0.5);
  --foreground-transparent-700: rgba(255, 255, 255, 0.6);
  --foreground-transparent-800: rgba(255, 255, 255, 0.7);
  --foreground-transparent-900: rgba(255, 255, 255, 0.8);

  /* Brand scales */
  --primary-200: rgb(227, 31, 28);
  --primary-300: #d31a17;
  --primary-400: #c01714;
  --primary-500: #b01411;
  --primary-600: #9d1210;
  --primary-700: #8a0f0d;
  --primary-800: #770c0a;
  --primary-900: #640a08;

  --accent-200: rgb(35, 166, 232);
  --accent-300: #1f94d1;
  --accent-400: #1b82ba;
  --accent-500: #1770a3;
  --accent-600: #14628f;
  --accent-700: #11557b;
  --accent-800: #0e4767;
  --accent-900: #0b3a53;

  --success-200: rgb(76, 175, 80);
  --success-300: #43a447;
  --success-400: #3a9d3e;
  --success-500: #319736;
  --success-600: #2c8630;
  --success-700: #26752a;
  --success-800: #216424;
  --success-900: #1b531e;

  --warning-200: #ffc107;
  --warning-300: #e6b106;
  --warning-400: #cc9f05;
  --warning-500: #b38d04;
  --warning-600: #997b03;
  --warning-700: #7f6903;
  --warning-800: #655702;
  --warning-900: #4b4501;

  --danger-200: #f44336;
  --danger-300: #e63a2f;
  --danger-400: #cc3128;
  --danger-500: #b02821;
  --danger-600: #99241c;
  --danger-700: #801b16;
  --danger-800: #66130f;
  --danger-900: #4d0a09;

  --info-200: #2196f3;
  --info-300: #1f8fe0;
  --info-400: #1c88ce;
  --info-500: #1a81bb;
  --info-600: #1778a8;
  --info-700: #147095;
  --info-800: #116782;
  --info-900: #0e5e6f;

  --premium-gradient: linear-gradient(to right, #15bcc4, #1a6aff, #a323ff);

  /* Radii */
  --radius: 0.625rem;
}

/* === Map to BTCPay tokens =================================================
     (BTCPay uses these in site.css; safest way to theme globally)
     Ref: docs.btcpayserver.org/Development/Theme/
   ========================================================================== */
:root {
  /* Primary scale expected by BTCPay examples */
  --btcpay-primary-100: color-mix(in oklab, var(--primary-200), white 90%);
  --btcpay-primary-200: var(--primary-200);
  --btcpay-primary-300: var(--primary-300);
  --btcpay-primary-400: var(--primary-400);
  --btcpay-primary-500: var(--primary-500);
  --btcpay-primary-600: var(--primary-600);
  --btcpay-primary-700: var(--primary-700);
  --btcpay-primary-800: var(--primary-800);
  --btcpay-primary-900: var(--primary-900);

  --btcpay-primary-rgb: 227, 31, 28; /* from --primary-200 */
  --btcpay-primary-accent-rgb: 157, 18, 16; /* ~ --primary-600 */

  --btcpay-primary: rgb(var(--btcpay-primary-rgb));
  --btcpay-primary-accent: rgb(var(--btcpay-primary-accent-rgb));
  --btcpay-primary-shadow: rgba(var(--btcpay-primary-rgb), 0.5);

  /* State colors (used by badges/alerts/progress) */
  --btcpay-success: var(--success-400);
  --btcpay-warning: var(--warning-300);
  --btcpay-danger: var(--danger-300);
  --btcpay-info: var(--info-300);

  /* Surface + text */
  --btcpay-body-bg: var(--background-200);
  --btcpay-body-color: var(--foreground-200);
  --btcpay-card-bg: var(--background-400);
  --btcpay-card-color: var(--foreground-200);
  --btcpay-border-color: var(--foreground-transparent-300);

  /* Accent */
  --btcpay-accent: var(--accent-300);
  --btcpay-accent-contrast: var(--foreground-200);
}

/* === Map to Bootstrap v5 CSS vars ======================================== */
:root {
  --bs-body-bg: var(--btcpay-body-bg);
  --bs-body-color: var(--btcpay-body-color);
  --bs-border-color: var(--btcpay-border-color);

  --bs-primary: var(--btcpay-primary);
  --bs-primary-rgb: var(--btcpay-primary-rgb);
  --bs-success: var(--btcpay-success);
  --bs-warning: var(--btcpay-warning);
  --bs-danger: var(--btcpay-danger);
  --bs-info: var(--btcpay-info);

  --bs-link-color: var(--accent-300);
  --bs-link-hover-color: var(--accent-200);

  --bs-card-bg: var(--btcpay-card-bg);
  --bs-card-color: var(--btcpay-card-color);

  --bs-focus-ring-color: color-mix(
    in oklab,
    var(--accent-300),
    transparent 70%
  );
  --bs-tertiary-bg: var(--background-300);
}

/* === Dark mode (BTCPay has light/dark; also honor prefers-color-scheme) === */
@media (prefers-color-scheme: dark) {
  :root {
    --btcpay-body-bg: var(--background-200);
    --btcpay-body-color: var(--foreground-200);
    --btcpay-card-bg: var(--background-400);
    --btcpay-card-color: var(--foreground-200);
    --btcpay-border-color: var(--foreground-transparent-300);
  }
}
/* If BTCPay toggles [data-bs-theme="dark"], enforce */
html[data-bs-theme="dark"] {
  --btcpay-body-bg: var(--background-200) !important;
  --btcpay-body-color: var(--foreground-200) !important;
  --btcpay-card-bg: var(--background-400) !important;
  --btcpay-card-color: var(--foreground-200) !important;
  --btcpay-border-color: var(--foreground-transparent-300) !important;
}

/* === Global primitives ==================================================== */
html,
body {
  background: var(--btcpay-body-bg);
  color: var(--btcpay-body-color);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* {
  box-sizing: border-box;
}
* {
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  display: none;
}

/* Selection */
::selection {
  background: color-mix(in oklab, var(--accent-300), transparent 20%);
  color: var(--foreground-200);
}

/* === Core components: Cards / Buttons / Forms / Nav ====================== */
.card,
.list-group,
.dropdown-menu,
.modal-content,
.toast,
.offcanvas,
.accordion,
.table {
  background-color: var(--btcpay-card-bg);
  color: var(--btcpay-card-color);
  border-color: var(--btcpay-border-color);
  box-shadow: 0 0 0 1px
      color-mix(in oklab, var(--btcpay-border-color), transparent 70%),
    0 8px 24px rgba(0, 0, 0, 0.35);
  border-radius: var(--radius);
}

/* Buttons (Bootstrap v5 vars) */
.btn-primary {
  --bs-btn-bg: var(--btcpay-primary);
  --bs-btn-border-color: var(--btcpay-primary);
  --bs-btn-hover-bg: var(--primary-600);
  --bs-btn-hover-border-color: var(--primary-700);
  --bs-btn-active-bg: var(--primary-700);
  --bs-btn-active-border-color: var(--primary-800);
  --bs-btn-disabled-bg: color-mix(
    in oklab,
    var(--btcpay-primary),
    transparent 40%
  );
  --bs-btn-disabled-border-color: color-mix(
    in oklab,
    var(--btcpay-primary),
    transparent 50%
  );
  color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--btcpay-primary);
  --bs-btn-border-color: var(--btcpay-primary);
  --bs-btn-hover-bg: color-mix(
    in oklab,
    var(--btcpay-primary),
    transparent 85%
  );
  --bs-btn-hover-border-color: var(--primary-600);
  --bs-btn-active-bg: color-mix(
    in oklab,
    var(--btcpay-primary),
    transparent 75%
  );
  --bs-btn-active-border-color: var(--primary-700);
}

/* Secondary & subtle buttons using accent palette */
.btn-secondary {
  --bs-btn-bg: var(--accent-400);
  --bs-btn-border-color: var(--accent-400);
  --bs-btn-hover-bg: var(--accent-500);
  --bs-btn-hover-border-color: var(--accent-600);
  color: #fff;
}

/* Links */
a {
  color: var(--bs-link-color);
  text-decoration: none;
}
a:hover,
a:focus {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

/* Forms */
.form-control,
.form-select,
.form-check-input,
.input-group-text {
  background-color: var(--background-300);
  border-color: var(--btcpay-border-color);
  color: var(--btcpay-body-color);
  border-radius: calc(var(--radius) - 2px);
}
.form-control:focus,
.form-select:focus {
  outline: 0;
  border-color: color-mix(in oklab, var(--accent-300), transparent 50%);
  box-shadow: 0 0 0 0.25rem
    color-mix(in oklab, var(--accent-300), transparent 70%);
}

/* Badges / Alerts */
.badge.text-bg-primary {
  background: var(--btcpay-primary);
}
.badge.text-bg-success {
  background: var(--btcpay-success);
}
.badge.text-bg-danger {
  background: var(--btcpay-danger);
}
.badge.text-bg-warning {
  background: var(--btcpay-warning);
  color: #1a1a1a;
}

.alert-primary {
  --bs-alert-bg: color-mix(in oklab, var(--btcpay-primary), transparent 88%);
  --bs-alert-color: var(--btcpay-primary);
}
.alert-success {
  --bs-alert-bg: color-mix(in oklab, var(--btcpay-success), transparent 88%);
  --bs-alert-color: var(--btcpay-success);
}
.alert-danger {
  --bs-alert-bg: color-mix(in oklab, var(--btcpay-danger), transparent 88%);
  --bs-alert-color: var(--btcpay-danger);
}
.alert-warning {
  --bs-alert-bg: color-mix(in oklab, var(--btcpay-warning), transparent 88%);
  --bs-alert-color: var(--btcpay-warning);
}

/* Navbar / Sidebar */
.navbar,
.offcanvas {
  background: var(--background-300);
  border-bottom: 1px solid var(--btcpay-border-color);
}

/* Tables */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--btcpay-card-color);
  --bs-table-border-color: var(--btcpay-border-color);
}
.table-hover > tbody > tr:hover {
  background: color-mix(in oklab, var(--foreground-200), transparent 96%);
}

/* Dropdowns */
.dropdown-menu {
  border: 1px solid var(--btcpay-border-color);
}

/* Progress / Spinners */
.progress-bar {
  background: var(--btcpay-primary);
}
.spinner-border,
.spinner-grow {
  color: var(--btcpay-primary);
}

/* Modals */
.modal-content {
  border: 1px solid var(--btcpay-border-color);
}

/* === Invoice/Checkout niceties (target generic patterns safely) ========== */
.qr,
.qr-code,
.qr-container,
[class*="qr"] {
  background: var(--background-300);
  border: 1px dashed var(--btcpay-border-color);
  border-radius: var(--radius);
  padding: 0.75rem;
}
.copy,
.copy-btn,
.copy-button,
[data-clipboard] {
  border-radius: calc(var(--radius) - 2px);
  outline: none;
}

/* === “Premium” accent utility =========================================== */
.premium,
.gradient-accent {
  background-image: var(--premium-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* === Focus ring hardening (accessibility) ================================ */
:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent-300), transparent 30%);
  outline-offset: 2px;
}

/* === Reduced motion ====================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* === Utilities to round things consistently ============================= */
.rounded-sm {
  border-radius: calc(var(--radius) - 4px) !important;
}
.rounded {
  border-radius: var(--radius) !important;
}
.rounded-lg {
  border-radius: calc(var(--radius) + 4px) !important;
}

/* === Card network backplates (optional, if you surface them somewhere) === */
[data-card-brand="visa"] {
  background: #0f387e5f;
}
[data-card-brand="mastercard"] {
  background: #4202027a;
}
[data-card-brand="discover"] {
  background: #471f0289;
}
[data-card-brand="amex"] {
  background: #11329685;
}
[data-card-brand="jcb"] {
  background: #02422b7c;
}
[data-card-brand="maestro"] {
  background: #0f387e5f;
}
[data-card-brand="other"] {
  background: #2121217a;
}

/* === Subtle separators =================================================== */
hr,
.dropdown-divider {
  border-color: color-mix(
    in oklab,
    var(--btcpay-border-color),
    transparent 40%
  );
}

/* === End ================================================================= */