/* ========================================
   KANZ — Light Mode
   Dark is default. Light is the alternate.
   Same jewel energy — medium-depth jewel backgrounds
   with white text, matching the dark theme's feel.
   ======================================== */

body.light-mode {
  /* Warm parchment base — sibling DNA */
  --bg: #faf8f4;
  --bg-section: #ffffff;
  --bg-aside: #f5f1eb;
  --bg-elevated: #fff;

  /* Text */
  --text: #2c2a26;
  --text-light: #6b6560;
  --text-lighter: #9a938c;

  /* Borders — warm */
  --border: #e0dbd3;
  --border-light: #ece7df;

  /* Shadows */
  --shadow: 0 2px 20px rgba(44, 42, 38, 0.08);
  --shadow-hover: 0 4px 30px rgba(44, 42, 38, 0.12);

  /* ============================================================
     JEWELS ON LIGHT — Medium-depth backgrounds, white text.
     Same energy as dark theme. Not pastel.
     ============================================================ */

  /* Gold — Quranic */
  --gold: #a07820;
  --gold-bg: #b8922e;
  --gold-bg-hover: #a68428;
  --gold-border: #8a6d1e;
  --gold-glow: 0 0 16px rgba(138, 109, 30, 0.12);

  /* Emerald — Prophetic */
  --emerald: #2a7a5a;
  --emerald-bg: #2a7a5a;
  --emerald-bg-hover: #247050;
  --emerald-border: #1a5c44;
  --emerald-glow: 0 0 16px rgba(26, 92, 68, 0.1);

  /* Ruby */
  --ruby: #a02030;
  --ruby-bg: #a02030;
  --ruby-bg-hover: #902028;
  --ruby-border: #801820;

  /* Amber */
  --amber: #b06818;
  --amber-bg: #b06818;
  --amber-bg-hover: #a06014;
  --amber-border: #905010;

  /* Sapphire */
  --sapphire: #2a5090;
  --sapphire-bg: #2a5090;
  --sapphire-bg-hover: #244882;
  --sapphire-border: #1e3e72;

  /* Amethyst */
  --amethyst: #5a3a80;
  --amethyst-bg: #5a3a80;
  --amethyst-bg-hover: #503474;
  --amethyst-border: #462e68;

  /* Olive */
  --olive: #5a5c10;
  --olive-bg: #5a5c10;
  --olive-bg-hover: #50520e;
  --olive-border: #44460a;

  /* Pearl */
  --pearl: #7a7670;
  --pearl-bg: #d8d2ca;
  --pearl-bg-hover: #cec8c0;
  --pearl-border: #a09a92;

  /* Topaz */
  --topaz: #8a5a10;
  --topaz-bg: #8a5a10;
  --topaz-bg-hover: #7a500e;
  --topaz-border: #6a4400;

  /* Tanzanite */
  --tanzanite: #3a2870;
  --tanzanite-bg: #3a2870;
  --tanzanite-bg-hover: #322264;
  --tanzanite-border: #2a1c58;

  /* Tourmaline */
  --tourmaline: #2a6a50;
  --tourmaline-bg: #2a6a50;
  --tourmaline-bg-hover: #245e46;
  --tourmaline-border: #1e523c;

  /* Citrine */
  --citrine: #7a6010;
  --citrine-bg: #7a6010;
  --citrine-bg-hover: #6c540e;
  --citrine-border: #604a0a;

  /* Carnelian */
  --carnelian: #8a3010;
  --carnelian-bg: #8a3010;
  --carnelian-bg-hover: #7a2a0e;
  --carnelian-border: #6a2008;

  /* Lapis Lazuli */
  --lapis: #2a5090;
  --lapis-bg: #2a5090;
  --lapis-bg-hover: #244882;
  --lapis-border: #1e3e72;

  /* Jade */
  --jade: #1a8a50;
  --jade-bg: #1a8a50;
  --jade-bg-hover: #167a46;
  --jade-border: #126a3c;

  /* Sunstone */
  --sunstone: #8a5010;
  --sunstone-bg: #8a5010;
  --sunstone-bg-hover: #7a460e;
  --sunstone-border: #6a3a08;

  /* Iolite */
  --iolite: #3a2860;
  --iolite-bg: #3a2860;
  --iolite-bg-hover: #322254;
  --iolite-border: #2a1c48;

  /* Malachite */
  --malachite: #1a6a3a;
  --malachite-bg: #1a6a3a;
  --malachite-bg-hover: #165e32;
  --malachite-border: #12522a;

  /* Turquoise */
  --turquoise: #1a6a80;
  --turquoise-bg: #1a6a80;
  --turquoise-bg-hover: #165e72;
  --turquoise-border: #125264;

  /* Tiger Eye */
  --tiger-eye: #7a5010;
  --tiger-eye-bg: #7a5010;
  --tiger-eye-bg-hover: #6c460e;
  --tiger-eye-border: #5e3c0a;

  /* Garnet */
  --garnet: #6a1010;
  --garnet-bg: #6a1010;
  --garnet-bg-hover: #5c0c0c;
  --garnet-border: #500808;

  /* Spinel */
  --spinel: #6a2058;
  --spinel-bg: #6a2058;
  --spinel-bg-hover: #5c1a4c;
  --spinel-border: #501044;
  --spinel-glow: 0 0 16px rgba(106, 32, 88, 0.12);

  /* Functional */
  --toggle-highlight: rgba(140, 84, 20, 0.25);
  --pulse: rgba(140, 84, 20, 0.2);
  --complete: rgba(26, 92, 68, 0.15);
}

/* ---- Header ---- */
body.light-mode .site-header {
  background: rgba(250, 248, 244, 0.92);
}

/* ---- Card text: white on medium-depth jewel backgrounds ---- */
/* The shared styles in components.css already handle white text on jewel cards. */
/* No per-card overrides needed — light mode cards match dark mode feel. */

/* ---- List items on light ---- */
body.light-mode .gem-list-item {
  background: #fff;
}

body.light-mode .gem-list-item:hover {
  background: var(--bg-aside);
}

body.light-mode .gem-list-item--quran .gem-list-item__arabic {
  color: #7a6018;
}

body.light-mode .gem-list-item--hadith .gem-list-item__arabic {
  color: #1a5c44;
}

/* ---- Bottom nav on light ---- */
body.light-mode .bottom-nav {
  background: rgba(250, 248, 244, 0.95);
}

body.light-mode .bottom-nav__item--active {
  color: #7a6018;
}

/* ---- Centerstage on light ---- */
body.light-mode .centerstage {
  background: rgba(44, 42, 38, 0.6);
}

body.light-mode .centerstage__glow--quran {
  background: radial-gradient(ellipse, rgba(184, 146, 46, 0.25) 0%, transparent 70%);
}

body.light-mode .centerstage__glow--hadith {
  background: radial-gradient(ellipse, rgba(42, 122, 90, 0.25) 0%, transparent 70%);
}

body.light-mode .centerstage__glow--spinel {
  background: radial-gradient(ellipse, rgba(106, 32, 88, 0.25) 0%, transparent 70%);
}

/* ---- Hadith library on light ---- */
body.light-mode .hadith-search input {
  background: #fff;
  border-color: #e0dbd3;
}

body.light-mode .hadith-chapter-item {
  background: #fff;
}

body.light-mode .hadith-chapter-item:hover {
  background: var(--bg-aside);
}

/* ---- Vault controls on light ---- */
body.light-mode .vault-search {
  background: #fff;
  border-color: #e0dbd3;
}

/* ---- Dropdown inner on light (inside jewel cards) ---- */
body.light-mode .gem-card__dropdown-inner {
  background: rgba(0, 0, 0, 0.12);
}

/* ---- Asma entry on light ---- */
body.light-mode .asma-entry {
  background: var(--gold-bg);
  border-color: var(--gold-border);
}

/* ---- Remember dhikr on light ---- */

body.light-mode .gem-card__share-menu {
  background: #fff;
  border-color: #e0dbd3;
}

body.light-mode .gem-card__share-option:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* ---- Ref card on light ---- */
body.light-mode .ref-card__row {
  border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .ref-card__label {
  color: rgba(255, 255, 255, 0.4);
}

body.light-mode .ref-card__block {
  border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .ref-card__arabic {
  background: rgba(0, 0, 0, 0.08);
}

body.light-mode .ref-card__english {
  background: rgba(0, 0, 0, 0.05);
}

/* ---- Actions bar on light ---- */
body.light-mode .gem-card__actions {
  border-color: rgba(0, 0, 0, 0.06);
}

/* ---- Treasury picker on light ---- */
body.light-mode .treasury-picker {
  background: #fff;
  border-color: #e0dbd3;
}

/* ---- Invokes on light ---- */
body.light-mode .gem-card__invokes {
  color: rgba(255, 255, 255, 0.55);
}

body.light-mode .gem-card__name-link {
  color: #f0e0b0;
}