/* ═══════════════════════════════════════════
   HoroscopePath — blog-tokens.css
   Custom brand tokens used in blog.php.
   Drop this into your <style> block or
   append to blog.css — replaces the broken
   tailwind.config JS block entirely.
═══════════════════════════════════════════ */

/* ── 1. Brand tokens ── */
:root {
  --ivory:     #faf8f3;
  --cream:     #f4f0e6;
  --charcoal:  #1a1a2e;
  --ink:       #2d2d3a;
  --ink-2:     #3d3d50;
  --muted:     #7a7a94;
  --gold:      #c9a84c;
  --gold-2:    #e8c97a;
  --gold-3:    #f5e3a0;
  --gold-dark: #8b6914;
  --bdr:       #e8e3d8;
  --night:     #0b0d1a;
  --night-2:   #1a1040;
}

/* ── 2. Base — body background, text colour, font ── */
/* class="bg-ivory text-ink-2 font-sans leading-relaxed" on <body> */
body {
  background-color: var(--ivory);
  color: var(--ink-2);
  font-family: 'DM Sans', sans-serif;
}

/* ── 3. Background utilities ── */
/* bg-ivory  — outer wrapper div */
.bg-ivory { background-color: var(--ivory); }
/* bg-cream  — meta chips, TOC, blockquote, sidebar chip backgrounds */
.bg-cream  { background-color: var(--cream); }

/* ── 4. Text colour utilities ── */
/* text-charcoal — h1, related heading */
.text-charcoal { color: var(--charcoal); }
/* text-ink      — breadcrumb current, sidebar titles, related card title */
.text-ink       { color: var(--ink); }
/* text-muted    — breadcrumb links, author line, meta chips, sidebar labels */
.text-muted     { color: var(--muted); }

/* ── 5. Gold gradient text ── */
/* text-gold-grad — CTA heading, sidebar CTA heading */
.text-gold-grad {
  background: linear-gradient(135deg, var(--gold), var(--gold-2), var(--gold-3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── 6. Background gradient utilities ── */
/* bg-gold-grad  — CTA primary button, sidebar CTA button */
.bg-gold-grad  { background: linear-gradient(135deg, var(--gold), #b8860b); }
/* bg-cta-dark  — article CTA box, sidebar CTA box */
.bg-cta-dark   { background: linear-gradient(160deg, var(--night), var(--night-2)); }

/* ── 7. Text on dark gold button ── */
/* text-night — CTA button label */
.text-night { color: var(--night); }

/* ── 8. Border colour ── */
/* border-bdr — meta divider, excerpt divider, TOC, sidebar rows */
.border-bdr { border-color: var(--bdr); }

/* ── 9. Hover utilities ── */
/* hover:text-gold-dark — tag links, explore links (inline onmouseover handles
   those already, but these cover any plain Tailwind hover: usage)             */
.hover\:text-gold-dark:hover { color: var(--gold-dark); }

/* ── 10. Group-hover for sidebar cards & related article titles ── */
/* .group:hover .group-hover\:text-gold-dark — sidebar blog link titles */
.group:hover .group-hover\:text-gold-dark { color: var(--gold-dark); }
