/* ==========================================
   ASTRO AI — Color Theme Override
   firecatlabs.com/astro-ai/

   Loaded AFTER style.css on all astro-ai/ pages.
   Only overrides color tokens and the handful of
   hardcoded rgba() values in style.css.
   Every layout, component, and responsive rule
   stays in style.css — never duplicated here.
   ========================================== */

/* ── 1. CSS Variable Overrides ─────────────────────────────── */
:root {

  /* Backgrounds — cool white with a subtle violet tint */
  --bg-primary:   #F8F7FF;
  --bg-secondary: #F5F3FF;
  --bg-tertiary:  #EDE9FE;

  /* Brand — indigo / violet palette */
  --color-fire:       #6D28D9;   /* violet-700  */
  --color-fire-dark:  #5B21B6;   /* violet-800  */
  --color-ember:      #4F46E5;   /* indigo-600  */
  --color-ember-dark: #4338CA;   /* indigo-700  */

  /* Gradients */
  --gradient-fire:       linear-gradient(135deg, #6D28D9 0%, #4F46E5 100%);
  --gradient-fire-hover: linear-gradient(135deg, #5B21B6 0%, #4338CA 100%);
  --gradient-fire-soft:  linear-gradient(135deg,
      rgba(109, 40, 217, 0.08) 0%,
      rgba(79,  70, 229, 0.08) 100%);

  /* Shadow */
  --shadow-fire: 0 4px 20px rgba(109, 40, 217, 0.20);
}

/* ── 2. Hardcoded rgba overrides ───────────────────────────── */
/*
   style.css has a few rgba() values that reference the orange
   directly instead of via a variable. We re-declare those rules
   here so Astro AI pages get the violet equivalents.
*/

/* Nav backdrop */
.nav {
  background: rgba(248, 247, 255, 0.90);
}

/* Hero + product-hero ambient glow */
.hero::before,
.product-hero::before {
  background: radial-gradient(ellipse,
      rgba(109, 40, 217, 0.06) 0%,
      transparent 65%);
}

/* Primary button hover glow */
.btn--primary:hover {
  box-shadow: 0 6px 24px rgba(109, 40, 217, 0.30);
}

/* Featured card borders */
.card--featured {
  border-color: rgba(109, 40, 217, 0.20);
  box-shadow: var(--shadow-md),
              inset 0 0 0 1px rgba(109, 40, 217, 0.10);
}
.card--featured:hover {
  border-color: rgba(109, 40, 217, 0.35);
  box-shadow: var(--shadow-lg), var(--shadow-fire);
}

/* App cards */
.app-card--featured {
  border-color: rgba(109, 40, 217, 0.25);
  background: linear-gradient(160deg, #FFFFFF 0%, #F8F7FF 100%);
}
.app-card--featured:hover {
  border-color: rgba(109, 40, 217, 0.40);
  box-shadow: var(--shadow-md),
              0 0 0 1px rgba(109, 40, 217, 0.15);
}

/* Legal callout border */
.legal-callout {
  border-color: rgba(109, 40, 217, 0.15);
}

/* Product mockup background */
.product-mockup__bg {
  background: linear-gradient(160deg,
      #FFFFFF  0%,
      #F5F3FF 50%,
      #EDE9FE 100%);
}