/*
  Color sections
  Six palettes for use across any section or module.
  Each palette has a .cs-light and .cs-dark variant.

  Usage:
    <section class="cs cs-purple cs-light"> … </section>
    <section class="cs cs-purple cs-dark">  … </section>
*/

/* ── Base tokens ────────────────────────────────────────── */
.cs {
  --cs-bg:     transparent;
  --cs-text:   currentColor;
  --cs-accent: currentColor;
  --cs-muted:  currentColor;

  background-color: var(--cs-bg);
  color:            var(--cs-text);
}

.cs a             { color: var(--cs-accent); }
.cs .cs-accent    { color: var(--cs-accent); }
.cs .cs-muted     { color: var(--cs-muted); }
.cs .cs-badge {
  background-color: var(--cs-accent);
  color:            var(--cs-bg);
}
.cs .cs-border    { border-color: var(--cs-accent); }
.cs .cs-bg-accent { background-color: var(--cs-accent); }

/* ── 1. Purple ─────────────────────────────────────────── */
.cs-purple.cs-light {
  --cs-bg:     #e3d7ff;
  --cs-text:   #423168;
  --cs-accent: #423168;
  --cs-muted:  #7b6ba8;
}
.cs-purple.cs-dark {
  --cs-bg:     #423168;
  --cs-text:   #e3d7ff;
  --cs-accent: #e3d7ff;
  --cs-muted:  #a899d4;
}

/* ── 2. Green ──────────────────────────────────────────── */
.cs-green.cs-light {
  --cs-bg:     #d4fbd3;
  --cs-text:   #1c3a21;
  --cs-accent: #1c3a21;
  --cs-muted:  #4a7050;
}
.cs-green.cs-dark {
  --cs-bg:     #1c3a21;
  --cs-text:   #d4fbd3;
  --cs-accent: #d4fbd3;
  --cs-muted:  #7ab882;
}

/* ── 3. Rose ───────────────────────────────────────────── */
.cs-rose.cs-light {
  --cs-bg:     #fcdced;
  --cs-text:   #7a1334;
  --cs-accent: #7a1334;
  --cs-muted:  #b0506e;
}
.cs-rose.cs-dark {
  --cs-bg:     #7a1334;
  --cs-text:   #fcdced;
  --cs-accent: #fcdced;
  --cs-muted:  #d48ba2;
}

/* ── 4. Yellow ─────────────────────────────────────────── */
.cs-yellow.cs-light {
  --cs-bg:     #fff3c4;
  --cs-text:   #000000;
  --cs-accent: #000000;
  --cs-muted:  #444444;
}
.cs-yellow.cs-dark {
  --cs-bg:     #92400e;
  --cs-text:   #fff3c4;
  --cs-accent: #fff3c4;
  --cs-muted:  #d4a86a;
}

/* ── 5. Amber ──────────────────────────────────────────── */
.cs-amber.cs-light {
  --cs-bg:     #fde68a;
  --cs-text:   #78350f;
  --cs-accent: #78350f;
  --cs-muted:  #a0602a;
}
.cs-amber.cs-dark {
  --cs-bg:     #78350f;
  --cs-text:   #fde68a;
  --cs-accent: #fde68a;
  --cs-muted:  #c9954a;
}

/* ── Quicklink cards adopt the active colour-section palette ──────
   Only apply inside a .cs section — without a chosen colour the cards
   keep their hardcoded default (cream) styling. Scoped selectors use
   two classes so they win over the Tailwind utility defaults. */
.cs .ql-card               { border-color: var(--cs-accent); }
.cs .ql-frost              { background-color: color-mix(in srgb, var(--cs-bg) 55%, transparent); }
/* Hover overlay adopts the palette instead of the hardcoded dark olive: a
   subtle gradient built from the palette's text colour. */
.cs .ql-hover-bg {
  background: linear-gradient(to bottom,
    var(--cs-text),
    color-mix(in srgb, var(--cs-text) 82%, #000));
}
/* Resting text follows the palette; on hover it flips to the palette's bg
   colour so it stays legible on every palette. */
.cs .ql-card:not(:hover) .ql-text { color: var(--cs-text); }
.cs .ql-card:hover .ql-text       { color: var(--cs-bg); }

/* ── 6. Blue ───────────────────────────────────────────── */
.cs-blue.cs-light {
  --cs-bg:     #bfdbfe;
  --cs-text:   #1e3a5f;
  --cs-accent: #1e3a5f;
  --cs-muted:  #4a6e96;
}
.cs-blue.cs-dark {
  --cs-bg:     #1e3a5f;
  --cs-text:   #bfdbfe;
  --cs-accent: #bfdbfe;
  --cs-muted:  #7aaad4;
}