/**
 * Perla Comps — brand tokens (loads after parent Vite CSS)
 *
 * Palette source: /perla-comps-v1.2-dev.html (client-approved mockup).
 * Mood: premium dark canvas with deep magenta tonal overlays + warm gold accent.
 * All parent @theme tokens resolve from this file, so templates that use
 * `bg-background-light`, `text-text-primary`, `bg-surface`, `text-primary`,
 * `bg-gray-100`, `border-gray-200`, etc. stay on brand without template edits.
 */

/* =========================================================================
   1. Parent @theme token overrides
   ========================================================================= */
:root {
  /* Brand — warm gold (primary) with darker gold for gradients / hover */
  --color-primary: #c9a84c;
  --color-primary-dark: #a8883a;
  --color-accent: #c9a84c;
  --color-accent-dark: #a8883a;
  --color-on-primary: #080510; /* near-black inky text on gold buttons */

  /* Supporting brand — deep purple as a complementary secondary */
  --color-secondary: #1e0f3a;

  /* Canvas vs. elevated surface (dark theme) */
  --color-background-light: #100c20; /* page canvas (body uses bg-background-light) */
  --color-background-dark: #0a0616; /* deepest wells behind canvas */
  --color-surface: #1c1538; /* cards, nav, elevated panels */

  /* Semantic statuses — tuned to dark theme, still accessible */
  --color-success: #4caf85;
  --color-danger: #e84545;
  --color-warning: #ff6b35;
  --color-info: #8b7dd1;

  /* Status bg/border/text triplets (dark theme: tinted dark bg + lighter text) */
  --color-success-bg: rgba(76, 175, 133, 0.12);
  --color-success-border: rgba(76, 175, 133, 0.4);
  --color-success-text: #8fd9b4;
  --color-danger-bg: rgba(232, 69, 69, 0.12);
  --color-danger-border: rgba(232, 69, 69, 0.4);
  --color-danger-text: #f6a3a3;
  --color-warning-bg: rgba(255, 107, 53, 0.12);
  --color-warning-border: rgba(255, 107, 53, 0.4);
  --color-warning-text: #ffb58e;
  --color-info-bg: rgba(139, 125, 209, 0.14);
  --color-info-border: rgba(139, 125, 209, 0.4);
  --color-info-text: #c6bbee;

  /* Text (warm pearl white on dark, lavender-grey for secondary) */
  --color-text-primary: #f4f0e8;
  --color-text-secondary: #a09ab8;

  /* Gray scale — inverted for dark theme so parent `bg-gray-100`,
     `border-gray-200`, `text-gray-500` stay appropriate without template edits. */
  --color-gray-50: #1a142f;
  --color-gray-100: #1c1538;
  --color-gray-200: rgba(255, 255, 255, 0.08);
  --color-gray-300: rgba(255, 255, 255, 0.14);
  --color-gray-400: #6b5f8f;
  --color-gray-500: #8b85a8;
  --color-gray-600: #a09ab8;
  --color-gray-700: #c4bfd5;
  --color-gray-800: #e0dce8;
  --color-gray-900: #f4f0e8;

  /* Typography — Poppins is preloaded by the parent theme + mockup */
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Shadow — warm gold glow on primary CTAs */
  --shadow-primary: 0 10px 24px -6px rgba(201, 168, 76, 0.45);

  /* Perla-specific helpers (optional, for custom sections) */
  --perla-primary-glow: rgba(201, 168, 76, 0.18);
  --perla-border: rgba(201, 168, 76, 0.22);
  --perla-border-dim: rgba(255, 255, 255, 0.08);
  --perla-live: #e84545;
  --perla-urgent: #ff6b35;
}

/* =========================================================================
   2. Tailwind default palette remaps (indigo / blue / purple → gold family)
   Parent `btn-checkout` uses `to-indigo-600`, and any stray indigo/blue
   utilities in the parent pick up these values instead of Tailwind defaults.
   ========================================================================= */
:root {
  /* Indigo — the parent's legacy brand hue, now mapped to gold */
  --color-indigo-50: #1a142f;
  --color-indigo-100: #241c48;
  --color-indigo-200: rgba(201, 168, 76, 0.18);
  --color-indigo-300: rgba(201, 168, 76, 0.32);
  --color-indigo-400: #d4b055;
  --color-indigo-500: #c9a84c;
  --color-indigo-600: #a8883a;
  --color-indigo-700: #8f7230;
  --color-indigo-800: #705926;
  --color-indigo-900: #463715;

  /* Purple — complementary deep magenta from the mockup */
  --color-purple-50: #1a142f;
  --color-purple-100: #241c48;
  --color-purple-200: #2d2457;
  --color-purple-300: #3a2f6e;
  --color-purple-400: #5a4a9b;
  --color-purple-500: #8b7dd1;
  --color-purple-600: #a08dcf;
  --color-purple-700: #c4bfd5;
  --color-purple-800: #e0dce8;
  --color-purple-900: #f4f0e8;

  /* Blue — remap to gold so any `text-blue-*`, `bg-blue-*` stays on brand */
  --color-blue-50: #1a142f;
  --color-blue-100: #241c48;
  --color-blue-200: rgba(201, 168, 76, 0.18);
  --color-blue-300: rgba(201, 168, 76, 0.32);
  --color-blue-400: #d4b055;
  --color-blue-500: #c9a84c;
  --color-blue-600: #a8883a;
  --color-blue-700: #8f7230;
  --color-blue-800: #705926;
  --color-blue-900: #463715;
}

/* =========================================================================
   3. Parent @utility overrides — replace hardcoded indigo with brand tokens
   ========================================================================= */
.text-gradient-primary {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    #e8c96a 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.bg-gradient-primary {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  ) !important;
}

.bg-gradient-dark {
  background: linear-gradient(
    135deg,
    var(--color-background-dark),
    var(--color-secondary)
  ) !important;
}

.shadow-primary {
  box-shadow: var(--shadow-primary) !important;
}

/* =========================================================================
   4. Dark-canvas remaps for hardcoded light surfaces
   Parent templates still use `bg-white` in several places; on a dark theme
   those must become elevated surface. Keep `bg-surface` consistent via token.
   ========================================================================= */
body .bg-white,
body .bg-surface {
  background-color: var(--color-surface);
}

body .bg-surface\/95 {
  background-color: color-mix(in srgb, var(--color-surface) 95%, transparent);
}

/* Explicit white #ffffff inline backgrounds (payment method rows) read as
   surface on the dark theme to stay legible. Parent sets these via inline
   style on .wc_payment_method; we override with higher specificity below. */
.woocommerce-checkout-payment .wc_payment_methods,
.woocommerce-checkout-payment .wc_payment_methods li,
.woocommerce-checkout-payment .wc_payment_method,
.woocommerce-checkout-payment .wc_payment_method:hover,
.woocommerce-checkout-payment .wc_payment_method.active,
.woocommerce-checkout-payment .payment_box,
.woocommerce-checkout-payment .payment_box .nera-wallet-gateway-description {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary);
}

/* =========================================================================
   5. Canvas base — flat deep magenta-black. The animated atmospheric
   orbs + gold specks (see perla-atmosphere.css + wp_body_open markup)
   provide the layered ambience from the client mockup.
   ========================================================================= */
body {
  background-color: var(--color-background-light);
  color: var(--color-text-primary);
}

/* Links on dark canvas: gold, brighter on hover, no default underline */
body a {
  color: var(--color-primary);
}

body a:hover {
  color: #e8c96a;
}

/* Progress / secondary "light" backgrounds (`bg-[#F1F5F9]`) tinted for dark */
.progress-bar-base,
[class*='bg-[#F1F5F9]'],
[class*='bg-\\[\\#F1F5F9\\]'] {
  background-color: rgba(255, 255, 255, 0.07) !important;
}

/* =========================================================================
   6. Nera Core plugin UI bridge
   ========================================================================= */
body {
  --nera-primary: var(--color-primary);
  --nera-text: var(--color-text-primary);
  --nera-text-secondary: var(--color-text-secondary);
  --nera-bg: var(--color-background-light);
  --nera-surface: var(--color-surface);
  --nera-border: var(--perla-border);
  --nera-accent: var(--color-accent);
}

/* =========================================================================
   7) Toast (parent footer, Alpine) — center icon + message in the card
   Parent markup: flex row [icon | flex-1 text | close]. flex-1 + close width
   kept content left. Pull close out of flow, center the remaining pair, and
   center-align the line of text. Does not require editing the parent theme.
   ========================================================================= */
body > div[x-data].fixed.top-20.right-6 [class~='group'][class~='bg-surface'].rounded-xl {
  position: relative;
  justify-content: center;
  align-items: center;
  column-gap: 0.75rem;
}

/* Stop the message column from filling remaining width (which pins text left) */
body > div[x-data].fixed.top-20.right-6 [class~='group'] > div.min-w-0 {
  flex: 0 1 auto;
  text-align: center;
}

/* Close: out of flex flow so only icon + message are centered in the row */
body > div[x-data].fixed.top-20.right-6 [class~='group'] > button {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

/* Nudge first column when row is centered (parent used items-start on small) */
body > div[x-data].fixed.top-20.right-6 [class~='group'] > div.shrink-0 {
  margin-top: 0;
}

/* =========================================================================
   8) Lottery for WooCommerce — jquery.alertable modal (`form.alertable`)
   Plugin CSS uses white (#fff); align with Tailwind bg-surface token.
   ========================================================================= */
form.alertable,
.alertable {
  background-color: var(--color-surface) !important;
  background: var(--color-surface) !important;
  color: var(--color-text-primary);
}

form.alertable .alertable-ok,
.alertable .alertable-ok {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  background-color: var(--color-primary) !important;
  border-color: color-mix(in srgb, var(--color-primary-dark) 40%, transparent) !important;
  color: var(--color-on-primary) !important;
  -webkit-text-fill-color: var(--color-on-primary) !important;
}

form.alertable .alertable-ok:hover,
form.alertable .alertable-ok:focus,
form.alertable .alertable-ok:active,
.alertable .alertable-ok:hover,
.alertable .alertable-ok:focus,
.alertable .alertable-ok:active {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%) !important;
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: var(--color-on-primary) !important;
  -webkit-text-fill-color: var(--color-on-primary) !important;
}

/* Attribution CTA — primary pill must stay black on gold (beats global a { text-primary }) */
body .nera-attribution-page a.perla-attr-cta-primary,
body .nera-attribution-page a.perla-attr-cta-primary:hover,
body .nera-attribution-page a.perla-attr-cta-primary:focus-visible {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

body .nera-attribution-page a.perla-attr-cta-primary svg {
  color: #000 !important;
  stroke: #000 !important;
}