/*
 * ChordGenAI — Brand override
 * Drop in: css/additional-styles/brand.css
 * Import in style.css AFTER all other @imports
 *
 * Purpose: Replace Tailwind indigo-500 with brand purple #7F77DD
 * and apply any other brand-specific tweaks without touching generated CSS.
 */

/* ── Brand colour tokens ──────────────────────────────────────────────────── */
:root {
  --cga-purple:       #7F77DD;   /* I block  — primary action   */
  --cga-purple-mid:   #6B63CE;   /* IV block — hover/slash      */
  --cga-purple-dark:  #534AB7;   /* V block  — pressed/deep     */
  --cga-purple-light: #9D96E8;   /* 'gen' tint — soft accent    */
  --cga-purple-glow:  rgba(83,74,183,0.15);
}

/* ── Override Tailwind indigo → brand purple ──────────────────────────────── */

/* Buttons: bg-indigo-500, hover:bg-indigo-600 */
.bg-indigo-500           { background-color: var(--cga-purple) !important; }
.hover\:bg-indigo-600:hover { background-color: var(--cga-purple-mid) !important; }

/* Text: text-indigo-500, text-indigo-400, text-indigo-300 */
.text-indigo-500         { color: var(--cga-purple) !important; }
.text-indigo-400         { color: var(--cga-purple) !important; }
.text-indigo-300         { color: var(--cga-purple-light) !important; }
.hover\:text-indigo-400:hover { color: var(--cga-purple-mid) !important; }

/* Fill (SVG icons) */
.fill-indigo-500         { fill: var(--cga-purple) !important; }

/* Rings (pricing card highlight, focus states) */
.ring-indigo-500         { --tw-ring-color: var(--cga-purple) !important; }
.focus\:border-indigo-500:focus { border-color: var(--cga-purple) !important; }

/* Form inputs */
.form-checkbox:checked,
.form-radio:checked {
  background-color: var(--cga-purple) !important;
}

/* bg-indigo-500/20 — avatar background */
.bg-indigo-500\/20 {
  background-color: rgba(127,119,221,0.20) !important;
}

/* ── Hero glow — matches app page ─────────────────────────────────────────── */
/* Applied to hero section via inline style already — kept for reference */

/* ── Form switch (pricing toggle) — override indigo ──────────────────────── */
.form-switch label {
  background-color: var(--cga-purple-dark) !important;
}

/* ── Smooth link underline on brand colour links ──────────────────────────── */
a.text-indigo-500,
a.text-indigo-400 {
  transition: color 0.15s ease-in-out;
}