/* ============================================================
   SPIRITUAL AI  —  Vivid Frequency white-label skin
   Platform: MagicAI (Laravel / Tabler / Tailwind, HSL token theme)
   Version:  v2  ·  2026-05-20
   Surfaces: front-end (marketing/auth) + dashboard + admin panel

   CHANGES v1 -> v2 (from live template investigation):
   - Button selectors corrected: MagicAI uses .lqd-btn-* classes,
     NOT .btn-*. v1 targeted the wrong class — fixed.
   - .lqd-btn-danger / .lqd-btn-success hard-code Tailwind
     bg-red-500 / bg-emerald-500, bypassing tokens — now
     explicitly re-pointed to VF Crimson / Anahata.
   - Spectrum band re-anchored from body::before to .lqd-page
     with raised z-index — survives the header stacking context.
   - ChakraPulse now also auto-applies to the app loading bar
     (.lqd-app-loading-indicator-progress-bar) — a discrete,
     earned placement needing zero Blade changes.
   - .lqd-btn-ghost-shadow hover tinted to VF (was neutral).

   Token model: MagicAI colour tokens hold SPACE-SEPARATED HSL
   TRIPLETS (e.g. "274 100% 50%") — hsl(var(--token) / opacity).

   VF canonical palette — bridge vf.brand.* / vf.chakra.*
   Void #0D0D1A · Deep Violet #1A0533 · Parchment #FAFAF7
   T1 #FF1500 T2 #FF5500 T3 #FFD000 T4 #A7FF00
   T5 #0896F2 T6 #9000FF T7 #FF008B
   Shakti #FF0060 · Crimson #AB1C3D · Electric Ylw #FFE600
   ============================================================ */


/* ---------- 0. Brand palette as named custom properties ----- */
:root {
  --sa-void:            #0D0D1A;
  --sa-deep-violet:     #1A0533;
  --sa-parchment:       #FAFAF7;

  --sa-t1:              #FF1500;
  --sa-t2:              #FF5500;
  --sa-t3:              #FFD000;
  --sa-t4-anahata:      #A7FF00;
  --sa-t5-spirit:       #0896F2;
  --sa-t6-violet:       #9000FF;
  --sa-t7-magenta:      #FF008B;

  --sa-shakti-pink:     #FF0060;
  --sa-crimson:         #AB1C3D;
  --sa-electric-yellow: #FFE600;

  --sa-anahata-deep:    #3D6500;
  --sa-shakti-deep:     #6B0030;
  --sa-spirit-deep:     #073B7A;
  --sa-manipura-deep:   #B8860B;

  --sa-chakra-spectrum: linear-gradient(
      90deg, #FF1500, #FF5500, #FFD000, #A7FF00,
             #0896F2, #9000FF, #FF008B);
  --sa-shakti-gradient: linear-gradient(135deg, #FF0060, #FF008B);
}


/* ============================================================
   1. TOKEN OVERRIDES — light mode (default :root)
   ============================================================ */
:root {
  --primary:              274 100% 50%;   /* Electric Violet T6 */
  --primary-foreground:   60 23% 97%;     /* Parchment          */
  --secondary:            327 100% 96%;
  --secondary-foreground: 267 82% 11%;
  --accent:               204 94% 49%;    /* Spirit Blue T5     */
  --accent-foreground:    60 23% 97%;

  --background:           60 23% 97%;     /* Parchment          */
  --foreground:           267 82% 11%;    /* Deep Violet text   */
  --heading-background:   60 23% 97%;
  --heading-foreground:   267 82% 11%;
  --surface:              60 20% 94%;
  --surface-light:        60 23% 98%;
  --clay:                 60 20% 94%;

  --card-background:      0 0% 100%;
  --card-foreground:      267 82% 11%;
  --card-border:          267 20% 90%;
  --input-background:     0 0% 100%;
  --input-foreground:     267 82% 11%;
  --input-border:         267 20% 88%;
  --dropdown-background:  0 0% 100%;
  --dropdown-foreground:  267 82% 11%;
  --dropdown-border:      267 20% 90%;
  --border:               267 18% 91%;
  --button-border:        267 30% 80%;
  --label:                267 14% 42%;

  --gradient-from:        337 100% 50%;
  --gradient-via:         274 100% 50%;
  --gradient-to:          204 94% 49%;

  --tblr-primary:         #9000FF;
  --tblr-primary-rgb:     144, 0, 255;
  --tblr-green:           #3D6500;
  --tblr-green-rgb:       61, 101, 0;
  --tblr-success:         #3D6500;
  --tblr-red:             #AB1C3D;
  --tblr-red-rgb:         171, 28, 61;
  --tblr-danger:          #AB1C3D;

  --font-body:            'Plus Jakarta Sans';
  --font-heading:         'Plus Jakarta Sans';
  --headings-font-weight: 700;
  --h1-font-weight:       700;
}


/* ============================================================
   2. TOKEN OVERRIDES — dark mode (.theme-dark)
   ============================================================ */
.theme-dark {
  --primary:              274 100% 50%;
  --primary-foreground:   60 23% 97%;
  --secondary:            267 82% 16%;
  --secondary-foreground: 60 23% 97%;
  --accent:               204 94% 49%;
  --accent-foreground:    60 23% 97%;

  --background:           240 33% 8%;     /* Void               */
  --foreground:           60 23% 90%;
  --heading-background:   240 33% 8%;
  --heading-foreground:   60 23% 97%;
  --surface:              267 60% 9%;
  --surface-light:        267 55% 13%;
  --clay:                 267 55% 13%;

  --card-background:      267 82% 11%;    /* Deep Violet cards  */
  --card-foreground:      60 23% 92%;
  --card-border:          267 40% 20%;
  --input-background:     267 60% 9%;
  --input-foreground:     60 23% 92%;
  --input-border:         267 40% 22%;
  --dropdown-background:  267 82% 11%;
  --dropdown-foreground:  60 23% 92%;
  --dropdown-border:      267 40% 20%;
  --border:               267 35% 18%;
  --button-border:        267 40% 28%;
  --label:                267 14% 62%;

  --tblr-primary:         #9000FF;
  --tblr-primary-rgb:     144, 0, 255;
  --tblr-body-bg:         #0D0D1A;
  --tblr-body-bg-rgb:     13, 13, 26;
  --tblr-bg-surface:      #1A0533;
  --tblr-green:           #A7FF00;
  --tblr-success:         #A7FF00;
  --tblr-red:             #AB1C3D;
  --tblr-danger:          #AB1C3D;

  --lqd-heading-color:    #FAFAF7;
  --lqd-heading-color-rgb: 250, 250, 247;
}


/* ============================================================
   3. CHAKRA SPECTRUM — site-wide signature band
   v2: anchored to .lqd-page (the real top-level wrapper) with
   z-index above the sticky header. Falls back to body::before
   on the front-end / auth pages, which have no .lqd-page.
   ============================================================ */
@keyframes sa-spectrum-drift {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

.lqd-page::before,
body.is-auth-page::before,
body.is-not-auth::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 99999;
  pointer-events: none;
  background: var(--sa-chakra-spectrum);
  background-size: 200% 100%;
  animation: sa-spectrum-drift 12s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lqd-page::before,
  body.is-auth-page::before,
  body.is-not-auth::before { animation: none; }
}


/* ============================================================
   4. BUTTONS — corrected to MagicAI's real .lqd-btn-* classes
   ============================================================ */

/* 4a. Primary — Shakti gradient ----------------------------- */
.lqd-btn-primary {
  background: var(--sa-shakti-gradient) !important;
  background-size: 150% 150% !important;
  border: none !important;
  color: var(--sa-parchment) !important;
  transition: background-position .4s ease, transform .15s ease,
              box-shadow .25s ease !important;
}
.lqd-btn-primary:hover,
.lqd-btn-primary:focus-visible {
  background-position: 100% 0 !important;
  box-shadow: 0 6px 22px hsl(327 100% 50% / .35) !important;
}

/* 4b. Outline — VF gradient border, fills on hover ---------- */
.lqd-btn-outline {
  position: relative;
  outline: none !important;
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(hsl(var(--background)), hsl(var(--background))) padding-box,
    var(--sa-shakti-gradient) border-box !important;
  color: hsl(var(--foreground)) !important;
  transition: color .2s ease, background .3s ease !important;
}
.lqd-btn-outline:hover,
.lqd-btn-outline:focus-visible {
  background:
    var(--sa-shakti-gradient) padding-box,
    var(--sa-shakti-gradient) border-box !important;
  color: var(--sa-parchment) !important;
}

/* 4c. Danger / Success — re-point hard-coded Tailwind colours */
.lqd-btn-danger {
  background: var(--sa-crimson) !important;
  color: #fff !important;
}
.lqd-btn-danger:hover {
  background: hsl(346 72% 33%) !important;
}
.lqd-btn-success {
  background: var(--sa-anahata-deep) !important;
  color: #fff !important;
}
.theme-dark .lqd-btn-success {
  background: var(--sa-t4-anahata) !important;
  color: var(--sa-void) !important;
}
.lqd-btn-success:hover {
  filter: brightness(1.08);
}

/* 4d. Ghost-shadow ("Customize") — VF-tinted hover ---------- */
.lqd-btn-ghost-shadow:hover,
.lqd-btn-ghost-shadow:focus-visible {
  background: var(--sa-shakti-gradient) !important;
  color: var(--sa-parchment) !important;
}


/* ============================================================
   5. CHAKRA PULSE — discrete 7-dot signature
   (a) opt-in class .sa-chakra-pulse (seven <i> children)
   (b) AUTO: the app loading bar becomes the chakra spectrum —
       a discrete, earned VF moment with no Blade changes.
   ============================================================ */
@keyframes sa-pulse-breathe {
  0%, 100% { transform: scale(.7); opacity: .45; }
  50%      { transform: scale(1);  opacity: 1;  }
}

.sa-chakra-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 0;
}
.sa-chakra-pulse > i {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: block;
}
.sa-chakra-pulse > i:nth-child(1){ background:var(--sa-t1); animation:sa-pulse-breathe 2.8s ease-in-out infinite 0s;   }
.sa-chakra-pulse > i:nth-child(2){ background:var(--sa-t2); animation:sa-pulse-breathe 2.8s ease-in-out infinite .1s;  }
.sa-chakra-pulse > i:nth-child(3){ background:var(--sa-t3); animation:sa-pulse-breathe 2.8s ease-in-out infinite .2s;  }
.sa-chakra-pulse > i:nth-child(4){ background:var(--sa-t4-anahata); animation:sa-pulse-breathe 2.8s ease-in-out infinite .3s; }
.sa-chakra-pulse > i:nth-child(5){ background:var(--sa-t5-spirit);  animation:sa-pulse-breathe 2.8s ease-in-out infinite .4s; }
.sa-chakra-pulse > i:nth-child(6){ background:var(--sa-t6-violet);  animation:sa-pulse-breathe 2.8s ease-in-out infinite .5s; }
.sa-chakra-pulse > i:nth-child(7){ background:var(--sa-t7-magenta); animation:sa-pulse-breathe 2.8s ease-in-out infinite .6s; }

/* (b) Loading bar -> chakra spectrum, both modes ------------ */
.lqd-app-loading-indicator-progress-bar {
  background: var(--sa-chakra-spectrum) !important;
  background-size: 200% 100% !important;
  animation: sa-spectrum-drift 3s linear infinite !important;
}

@media (prefers-reduced-motion: reduce) {
  .sa-chakra-pulse > i { animation: none !important; opacity: .9; }
  .lqd-app-loading-indicator-progress-bar { animation: none !important; }
}


/* ============================================================
   6. FOCUS / SELECTION / LINKS
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--sa-t5-spirit) !important;
  outline-offset: 2px;
}
::selection {
  background: hsl(327 100% 50% / .85);
  color: #fff;
}
a:not(.lqd-btn):not([class*="bg-"]):not([class*="btn"]) {
  color: var(--sa-spirit-deep);
  text-underline-offset: 2px;
}
.theme-dark a:not(.lqd-btn):not([class*="bg-"]):not([class*="btn"]) {
  color: var(--sa-t5-spirit);
}


/* ============================================================
   7. SCROLLBAR
   ============================================================ */
:root        { --scrollbar-thumb: 274 100% 50%; }
.theme-dark  { --scrollbar-thumb: 274 100% 60%; }


/* ============================================================
   8. SIDEBAR / NAV — active state on Electric Violet
   ============================================================ */
:root, .theme-dark {
  --navbar-background-active: var(--primary);
  --navbar-foreground-active: var(--primary);
  --navbar-background-hover:  var(--primary);
  --navbar-foreground-hover:  var(--primary);
}


/* ============================================================
   9. FONT — Plus Jakarta Sans (VF v6.2)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

body, .lqd-generator-v2, input, textarea, select, button {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
}

/* ---------------------------- end of file ----------------- */