/* =========================================================
   ALBA Theme — Infrared Magenta + Electric Cyan
   Primary = Magenta, Secondary = Cyan
   ========================================================= */

/* Light theme tokens */
:root,
[data-bs-theme="light"]{
  /* Brand */
  --bs-primary:  #FF1E8A;  /* Infrared Magenta */
  --bs-secondary:#00E5FF;  /* Electric Cyan   */

  /* Optional supporting tones */
  --bs-info:     #3FD9FF;
  --bs-success:  #16A34A;
  --bs-warning:  #F59E0B;
  --bs-danger:   #EF4444;
  --bs-dark:     #0B1020;

  /* Text / links */
  --bs-body-bg:    #FFFFFF;
  --bs-body-color: #0F172A;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 80%, #000 20%);
}

/* Dark theme tokens (lightened brand for contrast) */
[data-bs-theme="dark"]{
  --bs-body-bg:    #0B1020;
  --bs-body-color: #E5E7EB;

  --bs-primary:   #FF6CB3; /* lighter magenta */
  --bs-secondary: #66F0FF; /* lighter cyan    */
  --bs-link-color:        var(--bs-primary);
  --bs-link-hover-color:  #FFC1DD;
}

/* ---------- Colorful page background driven by brand ---------- */
body{
  background:
    radial-gradient(1000px 500px at 0% 0%,
      color-mix(in srgb, var(--bs-primary) 22%, transparent) 0%,
      transparent 70%),
    radial-gradient(900px 420px at 100% 10%,
      color-mix(in srgb, var(--bs-secondary) 20%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 85%);
  background-attachment: fixed;
}

/* Dark mode background */
[data-bs-theme="dark"] body{
  background:
    radial-gradient(1100px 520px at 0% 0%,
      color-mix(in srgb, var(--bs-primary) 26%, transparent) 0%,
      transparent 70%),
    radial-gradient(900px 420px at 100% 10%,
      color-mix(in srgb, var(--bs-secondary) 22%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg, #0b1020 0%, #0d1324 85%);
}

/* ---------- Hero uses brand colors (magenta ↔ cyan) ---------- */
.alba-hero{
  background:
    radial-gradient(900px 360px at 85% 20%,
      color-mix(in srgb, var(--bs-secondary) 24%, transparent) 0%,
      transparent 70%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--bs-primary) 28%, transparent),
      color-mix(in srgb, var(--bs-secondary) 18%, transparent));
  border-bottom: 1px solid rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .alba-hero{
  background:
    radial-gradient(900px 360px at 85% 20%,
      color-mix(in srgb, var(--bs-secondary) 30%, transparent) 0%,
      transparent 70%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--bs-primary) 32%, transparent),
      color-mix(in srgb, var(--bs-secondary) 22%, transparent));
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ---------- Card polish (kept from your theme) ---------- */
.card{
  border-radius:.75rem;
  border-color: var(--bs-border-color, #e5e7eb);
  box-shadow: 0 .25rem 1rem rgba(0,0,0,.05);
}

/* If you still use card-tint-* anywhere, they’ll adopt new colors */
.card-tint-primary{
  --t1: color-mix(in srgb, var(--bs-primary) 26%, transparent);
  --t2: color-mix(in srgb, var(--bs-primary) 10%, transparent);
  background: linear-gradient(180deg, var(--t1), var(--t2));
  border-left: 4px solid var(--bs-primary);
}
.card-tint-secondary{
  --t1: color-mix(in srgb, var(--bs-secondary) 28%, transparent);
  --t2: color-mix(in srgb, var(--bs-secondary) 12%, transparent);
  background: linear-gradient(180deg, var(--t1), var(--t2));
  border-left: 4px solid var(--bs-secondary);
}
.card-tint-neutral{
  --t1: rgba(15,23,42,.06);
  --t2: rgba(15,23,42,.03);
  background: linear-gradient(180deg, var(--t1), var(--t2));
}
[data-bs-theme="dark"] .card-tint-primary{ --t1: color-mix(in srgb, var(--bs-primary) 34%, transparent); --t2: color-mix(in srgb, var(--bs-primary) 16%, transparent);}
[data-bs-theme="dark"] .card-tint-secondary{ --t1: color-mix(in srgb, var(--bs-secondary) 36%, transparent); --t2: color-mix(in srgb, var(--bs-secondary) 18%, transparent);}
[data-bs-theme="dark"] .card-tint-neutral{ --t1: rgba(255,255,255,.07); --t2: rgba(255,255,255,.04);}

/* Your featured POP panels already use --accent via .panel-primary/.panel-secondary */
.panel-primary  { --accent: var(--bs-primary); }   /* infrared magenta */
.panel-secondary{ --accent: var(--bs-secondary); } /* electric cyan   */
.panel-neutral  { --accent: rgba(15,23,42,.35); }

/* ===== Vivid, colorful cards (no hover) ===== */
.panel-vivid{
  /* gradient border */
  position: relative;
  border:1px solid transparent;
  border-radius:1rem;
  background:
    linear-gradient(var(--panel-bg, #fff), var(--panel-bg, #fff)) padding-box,
    linear-gradient(135deg, var(--a1), var(--a2)) border-box;
  box-shadow:
    0 10px 28px rgba(0,0,0,.08),
    0 0 0 .5px color-mix(in srgb, var(--a1) 30%, transparent);
  /* remove this line if you want zero animation: */
  /* transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; */
}
[data-bs-theme="dark"] .panel-vivid{
  --panel-bg:#0e1326;
  box-shadow:
    0 10px 28px rgba(0,0,0,.35),
    0 0 0 .5px color-mix(in srgb, var(--a1) 45%, transparent);
}

/* juicy interior tint */
.panel-vivid .card-body{
  border-radius:.85rem;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--a2) 18%, transparent), transparent 60%),
    radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--a1) 22%, transparent), transparent 65%);
}

/* title pop + accent underline */
.panel-vivid .card-title{
  font-weight:800; letter-spacing:.2px; position:relative; margin-bottom:.75rem;
}
.panel-vivid .card-title::after{
  content:""; position:absolute; left:0; bottom:-.35rem; height:3px; width:56px;
  background: linear-gradient(90deg, var(--a1), var(--a2));
  border-radius:999px;
}

/* list items inside get a soft wash */
.panel-vivid .list-group-item{
  background: color-mix(in srgb, var(--a2) 9%, transparent);
  border-color: color-mix(in srgb, var(--a2) 18%, rgba(0,0,0,.08));
}
[data-bs-theme="dark"] .panel-vivid .list-group-item{
  background: color-mix(in srgb, var(--a2) 14%, transparent);
  border-color: color-mix(in srgb, var(--a2) 22%, rgba(255,255,255,.10));
}

/* map brand → vivid gradient endpoints */
.panel-primary.panel-vivid  { --a1: var(--bs-primary);   --a2: var(--bs-secondary); }
.panel-secondary.panel-vivid{ --a1: var(--bs-secondary); --a2: var(--bs-primary);   }
.panel-neutral.panel-vivid  { --a1: color-mix(in srgb, var(--bs-primary) 50%, var(--bs-secondary) 50%);
                               --a2: color-mix(in srgb, var(--bs-secondary) 50%, transparent); }

/* Monochrome variants for vivid cards */
.panel-magenta.panel-vivid { --a1: var(--bs-primary);   --a2: var(--bs-primary); }
.panel-cyan.panel-vivid    { --a1: var(--bs-secondary); --a2: var(--bs-secondary); }

/* (Optional) neutral stays blended; keep your .panel-neutral.panel-vivid as-is */

/* Big, featured project description card */
.project-hero{
  border-radius: 1.25rem;
  box-shadow: 0 18px 60px rgba(0,0,0,.08);
}
.project-hero .card-body{
  padding: 2rem 1.5rem;
}
.project-hero .card-title{
  font-size: 1.35rem;
  letter-spacing: .2px;
  font-weight: 800;
}

@media (min-width: 992px){
  .project-hero .card-body{ padding: 2.5rem 2rem; font-size: 1.05rem; }
}

/* === Slightly larger text inside feature cards === */
.panel-pop .card-title,
.panel-vivid .card-title{
  font-size: 1.20rem;         /* was ~1.05–1.1 */
  letter-spacing: .2px;
}

.panel-pop .card-body,
.panel-vivid .card-body{
  font-size: 1.04rem;          /* was ~1.0 */
  line-height: 1.6;
}

/* Make any .small text inside the cards a touch larger too */
.panel-pop .card-body .small,
.panel-vivid .card-body .small{
  font-size: .98rem;
}

/* Scale a bit more on wider screens */
@media (min-width: 768px){
  .panel-pop .card-title,
  .panel-vivid .card-title{ font-size: 1.26rem; }
  .panel-pop .card-body,
  .panel-vivid .card-body{ font-size: 1.06rem; }
}

@media (min-width: 1200px){
  .panel-pop .card-title,
  .panel-vivid .card-title{ font-size: 1.30rem; }
  .panel-pop .card-body,
  .panel-vivid .card-body{ font-size: 1.08rem; }
}

/* Taller hero for content pages like Specs */
.alba-hero--tall{
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
  min-height: 240px;
}
@media (min-width: 992px){
  .alba-hero--tall{
    padding-top: 4.75rem;
    padding-bottom: 4.75rem;
    min-height: 300px;
  }
}

/* Optional: make the hero icon feel branded */
.alba-hero .bi-stars{
  color: var(--bs-primary);
}