/* ==========================================================================
   Category accent themes — 7 categories x 2 modes.
   Applied via  <html data-category="finance-loan">  on category + tool pages.
   The site shell (homepage, policy pages) carries no data-category and keeps
   the neutral ink-blue hub accent from core.css.

   Every --accent value below was contrast-checked against both --bg and
   --surface in its own mode. Worst case is womens-health light at 5.78:1;
   all others exceed 5.9:1. WCAG AA for normal text is 4.5:1.
   ========================================================================== */

/* ---------- Finance & Loan — corporate green, money-growth motif --------- */
[data-category='finance-loan'] {
  --accent:      #0B6B4F;   /* 6.18:1 on bg, 6.50:1 on surface */
  --accent-2:    #1E5FA8;
  --accent-soft: #E7F3EE;
  --accent-on:   #FFFFFF;
}
html[data-theme='dark'][data-category='finance-loan'] {
  --accent:      #4FCF9E;   /* 9.44:1 on bg, 8.72:1 on surface */
  --accent-2:    #7FB2F0;
  --accent-soft: #123026;
  --accent-on:   #08150F;
}

/* ---------- Health & Fitness — vitality teal, pulse motif ---------------- */
[data-category='health-fitness'] {
  --accent:      #0E6A78;   /* 5.95:1 / 6.27:1 */
  --accent-2:    #C2571B;
  --accent-soft: #E5F2F4;
  --accent-on:   #FFFFFF;
}
html[data-theme='dark'][data-category='health-fitness'] {
  --accent:      #4FD0DA;   /* 9.98:1 / 9.22:1 */
  --accent-2:    #F0A365;
  --accent-soft: #103034;
  --accent-on:   #07171A;
}

/* ---------- Women's Health — soft rose, gentle rounded shapes ------------ */
[data-category='womens-health'] {
  --accent:      #A8386E;   /* 5.78:1 / 6.08:1 — the tightest pair, still AA */
  --accent-2:    #7A5AA8;
  --accent-soft: #FBEAF2;
  --accent-on:   #FFFFFF;
  --radius:      14px;      /* softer corners carry the category's character */
  --radius-lg:   22px;
}
html[data-theme='dark'][data-category='womens-health'] {
  --accent:      #F2A8CB;   /* 9.87:1 / 9.11:1 */
  --accent-2:    #C3AEEA;
  --accent-soft: #3A1F2C;
  --accent-on:   #2A0E1B;
}

/* ---------- Zakat / Islamic Finance — deep green + gold ------------------ */
[data-category='zakat'] {
  --accent:      #1D6B3C;   /* 6.20:1 / 6.52:1 */
  --accent-2:    #8A6A12;   /* gold, text-safe */
  --accent-soft: #E8F3EB;
  --accent-on:   #FFFFFF;
}
html[data-theme='dark'][data-category='zakat'] {
  --accent:      #6FCB8A;   /* 9.30:1 / 8.58:1 */
  --accent-2:    #E0B84A;
  --accent-soft: #14301F;
  --accent-on:   #08170E;
}

/* ---------- Math & Science — precise navy, graph-paper motif ------------- */
[data-category='math-science'] {
  --accent:      #2C4070;   /* 9.62:1 / 10.12:1 */
  --accent-2:    #4A6491;
  --accent-soft: #EAEEF7;
  --accent-on:   #FFFFFF;
  --radius:      6px;       /* tighter corners read as technical precision */
  --radius-lg:   10px;
}
html[data-theme='dark'][data-category='math-science'] {
  --accent:      #93ACE4;   /* 8.13:1 / 7.51:1 */
  --accent-2:    #B6C6EE;
  --accent-soft: #1C2740;
  --accent-on:   #0D1424;
}

/* ---------- Date & Time — warm neutral, clock motif --------------------- */
[data-category='date-time'] {
  --accent:      #4A4842;   /* 8.69:1 / 9.14:1 */
  --accent-2:    #8A6A12;
  --accent-soft: #F0EEEA;
  --accent-on:   #FFFFFF;
}
html[data-theme='dark'][data-category='date-time'] {
  --accent:      #C6C1B6;   /* 10.28:1 / 9.49:1 */
  --accent-2:    #E0B84A;
  --accent-soft: #2A2823;
  --accent-on:   #17150F;
}

/* ---------- Grade / GPA — academic maroon ------------------------------- */
[data-category='grade-gpa'] {
  --accent:      #7C2334;   /* 9.30:1 / 9.78:1 */
  --accent-2:    #2C4070;
  --accent-soft: #F8EAED;
  --accent-on:   #FFFFFF;
}
html[data-theme='dark'][data-category='grade-gpa'] {
  --accent:      #EE93A2;   /* 8.20:1 / 7.57:1 */
  --accent-2:    #93ACE4;
  --accent-soft: #331A20;
  --accent-on:   #240E13;
}

/* ==========================================================================
   Category motifs — pure CSS, no image files (rule 12).
   Each paints only the category hero band, at low opacity, behind content.
   ========================================================================== */
.cat-hero { position: relative; overflow: hidden; padding-block: var(--sp-6); }
.cat-hero > * { position: relative; z-index: 1; }
.cat-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  opacity: .5; pointer-events: none;
}

/* Finance — rising bars */
[data-category='finance-loan'] .cat-hero::after {
  background-image:
    linear-gradient(to top, color-mix(in srgb, var(--accent) 20%, transparent) 0 100%),
    linear-gradient(to top, color-mix(in srgb, var(--accent) 20%, transparent) 0 100%),
    linear-gradient(to top, color-mix(in srgb, var(--accent) 20%, transparent) 0 100%);
  background-repeat: no-repeat;
  background-size: 14px 28%, 14px 52%, 14px 78%;
  background-position: calc(100% - 92px) 100%, calc(100% - 62px) 100%, calc(100% - 32px) 100%;
  opacity: .35;
}

/* Health — pulse line */
[data-category='health-fitness'] .cat-hero::after {
  background-image: linear-gradient(
    90deg, transparent 0 8%,
    color-mix(in srgb, var(--accent) 26%, transparent) 8% 8.4%,
    transparent 8.4% 100%);
  background-repeat: repeat-x;
  background-size: 120px 100%;
  opacity: .3;
}

/* Women's Health — soft overlapping circles */
[data-category='womens-health'] .cat-hero::after {
  background-image:
    radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--accent) 22%, transparent) 0 60px, transparent 61px),
    radial-gradient(circle at 96% 68%, color-mix(in srgb, var(--accent-2) 18%, transparent) 0 44px, transparent 45px);
}

/* Zakat — eight-point Islamic geometric lattice */
[data-category='zakat'] .cat-hero::after {
  background-image:
    repeating-linear-gradient(45deg,  color-mix(in srgb, var(--accent-2) 18%, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent-2) 18%, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg,   color-mix(in srgb, var(--accent) 12%, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg,  color-mix(in srgb, var(--accent) 12%, transparent) 0 1px, transparent 1px 26px);
  opacity: .32;
}

/* Math & Science — graph paper */
[data-category='math-science'] .cat-hero::after {
  background-image:
    repeating-linear-gradient(0deg,  color-mix(in srgb, var(--accent) 16%, transparent) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent) 0 1px, transparent 1px 24px);
  opacity: .38;
}

/* Date & Time — concentric clock rings */
[data-category='date-time'] .cat-hero::after {
  background-image: repeating-radial-gradient(
    circle at 92% 42%,
    color-mix(in srgb, var(--accent) 20%, transparent) 0 1px,
    transparent 1px 22px);
  opacity: .42;
}

/* Grade / GPA — ruled notebook lines */
[data-category='grade-gpa'] .cat-hero::after {
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 14%, transparent) 0 1px, transparent 1px 30px);
  opacity: .4;
}

/* Motifs are decoration only — drop them when the user wants less visual noise */
@media (prefers-reduced-motion: reduce) {
  .cat-hero::after { opacity: .18; }
}