/* Worlds: Western / Hindustani / Fusion. Each is a distinct design (palette,
   type, shape, motif), not a recolour. Linked before index.html's inline
   <style>, so every selector carries [data-world] to outrank :root and
   [data-theme="dark"]. Variables are set on the root element and inherit.
   Body-text contrast (ink on paper) is >= 14:1 in all six combinations;
   accent on paper is >= 6.9:1. */

/* ---------- WESTERN, light: cool ivory, graphite, deep blue ---------- */
[data-world="western"]{
  --ink:#1B1F27; --ink-soft:#333A47; --sepia:#4A5568; --sepia-soft:#6B7586;
  --rule:rgba(27,31,39,.14); --rule-strong:rgba(27,31,39,.24);
  --red:#2F4A7A; --red-deep:#1F3558; --red-soft:#D5DDEB; --red-ink:#16264A; --red-accent:#2F4A7A;
  --paper:#EEF0F3; --paper-light:#F7F8FA; --ivory:#FCFCFD; --highlight:#8FA6C9;
  --track-hindustani:#2F4A7A; --track-hindustani-soft:#D5DDEB;
  --track-western:#2F4A7A; --track-western-soft:#D5DDEB;
  --track-fusion:#4A6FA5; --track-fusion-soft:#DDE5F0;
  --chrome-bg:#F7F8FA; --chrome-ink:#1B1F27; --chrome-rule:rgba(27,31,39,.12);
  --grad-ember:linear-gradient(170deg,#2F4A7A 0%,#1F3558 165%);
  --grad-ember-wash:linear-gradient(180deg,rgba(47,74,122,.045) 0%,rgba(47,74,122,0) 38%);
  --radius-sm:2px; --radius-md:4px; --radius-lg:6px; --radius-xl:8px;
  --shadow-1:0 1px 1px rgba(27,31,39,.05);
  --shadow-2:0 1px 3px rgba(27,31,39,.08), 0 4px 10px rgba(27,31,39,.04);
  --shadow-3:0 2px 6px rgba(27,31,39,.10), 0 12px 28px rgba(27,31,39,.08);
  --font-display:'Playfair Display',Georgia,serif;
  --world-motif:repeating-linear-gradient(180deg,rgba(47,74,122,.07) 0 1px,transparent 1px 7px);
}
/* Western, dark: the original dark theme, with a blue accent only */
[data-world="western"][data-theme="dark"]{
  --red:#3E5F9A; --red-deep:#2F4A7A; --red-accent:#8FAEE6;
  --track-hindustani:#8FAEE6; --track-western:#8FAEE6; --track-fusion:#8FAEE6;
  --grad-ember:linear-gradient(170deg,#4A6FB0 0%,#2F4A7A 165%);
  --grad-ember-wash:linear-gradient(180deg,rgba(143,174,230,.07) 0%,rgba(143,174,230,0) 40%);
  --world-motif:repeating-linear-gradient(180deg,rgba(143,174,230,.08) 0 1px,transparent 1px 7px);
}


/* ---------- HINDUSTANI, light: warm cream, saffron, maroon, indigo ---------- */
[data-world="hindustani"]{
  --ink:#2A1A12; --ink-soft:#4A3426; --sepia:#3B3A6B; --sepia-soft:#6A68A0;
  --rule:rgba(138,43,35,.20); --rule-strong:rgba(138,43,35,.32);
  --red:#B23A2F; --red-deep:#8A2B23; --red-soft:#EBCBC0; --red-ink:#5C1C16; --red-accent:#8A2B23;
  --paper:#F4E6C8; --paper-light:#FAF1DB; --ivory:#FFFAEC; --highlight:#E8A317;
  --track-hindustani:#8A2B23; --track-hindustani-soft:#EBCBC0;
  --track-western:#3B3A6B; --track-western-soft:#DAD8EC;
  --track-fusion:#B97A12; --track-fusion-soft:#F5E1B4;
  --chrome-bg:#FAF1DB; --chrome-ink:#2A1A12; --chrome-rule:rgba(138,43,35,.20);
  --grad-ember:linear-gradient(170deg,#B23A2F 0%,#7A2019 165%);
  --grad-ember-wash:linear-gradient(180deg,rgba(232,163,23,.10) 0%,rgba(232,163,23,0) 40%);
  --radius-sm:6px; --radius-md:12px; --radius-lg:18px; --radius-xl:24px;
  --shadow-1:0 1px 3px rgba(122,60,20,.10), 0 2px 6px rgba(122,60,20,.06);
  --shadow-2:0 3px 8px rgba(122,60,20,.12), 0 12px 26px rgba(122,60,20,.10);
  --shadow-3:0 8px 16px rgba(122,60,20,.14), 0 28px 52px rgba(122,60,20,.14);
  --font-display:'Tiro Devanagari Hindi','Playfair Display',serif;
  --world-motif:linear-gradient(90deg,transparent,#B23A2F 18%,#B23A2F 82%,transparent);
}
/* Hindustani, dark: exactly the original dark theme (its red is the accent) */
[data-world="hindustani"][data-theme="dark"]{
  --world-motif:linear-gradient(90deg,transparent,rgba(227,102,87,.45),transparent);
}


/* ---------- FUSION, light: deep teal and gold split-tone ---------- */
[data-world="fusion"]{
  --ink:#12262F; --ink-soft:#2C434E; --sepia:#5C4A1E; --sepia-soft:#8A7640;
  --rule:rgba(31,58,74,.18); --rule-strong:rgba(31,58,74,.30);
  --red:#1F3A4A; --red-deep:#142A37; --red-soft:#CFDDE3; --red-ink:#0E2430; --red-accent:#1F3A4A;
  --paper:#E9EEEE; --paper-light:#F3F6F5; --ivory:#FBFCFA; --highlight:#C9A96B;
  --track-hindustani:#8A2B23; --track-hindustani-soft:#EBCBC0;
  --track-western:#1F3A4A; --track-western-soft:#CFDDE3;
  --track-fusion:#B98F3E; --track-fusion-soft:#F0E2C4;
  --chrome-bg:#F3F6F5; --chrome-ink:#12262F; --chrome-rule:rgba(31,58,74,.16);
  --grad-ember:linear-gradient(135deg,#1F3A4A 0%,#1F3A4A 55%,#8A7640 160%);
  --grad-ember-wash:linear-gradient(180deg,rgba(201,169,107,.10) 0%,rgba(201,169,107,0) 40%);
  --radius-sm:3px; --radius-md:8px; --radius-lg:14px; --radius-xl:20px;
  --shadow-1:0 1px 2px rgba(18,38,47,.08), 0 2px 6px rgba(18,38,47,.05);
  --shadow-2:0 2px 4px rgba(18,38,47,.08), 0 10px 24px rgba(18,38,47,.10);
  --shadow-3:0 6px 12px rgba(18,38,47,.12), 0 24px 48px rgba(18,38,47,.14);
  --font-display:'Montserrat',system-ui,sans-serif;
  --world-motif:linear-gradient(135deg,#1F3A4A 0 50%,#C9A96B 50% 100%);
}
/* Fusion, dark: the original dark theme, with a teal button and gold accent */
[data-world="fusion"][data-theme="dark"]{
  --red:#1F6F78; --red-deep:#17565D; --red-accent:#D9BE82;
  --track-hindustani:#D9BE82; --track-western:#D9BE82; --track-fusion:#D9BE82;
  --grad-ember:linear-gradient(170deg,#2A8591 0%,#17565D 165%);
  --grad-ember-wash:linear-gradient(180deg,rgba(217,190,130,.07) 0%,rgba(217,190,130,0) 40%);
}


/* ---------- Headings: display face on h1/h2 and tool names only ---------- */
[data-world] .nh-tool-name,
[data-world] h1,
[data-world] h2{ font-family:var(--font-display); }
[data-world="fusion"] h1,
[data-world="fusion"] h2,
[data-world="fusion"] .nh-tool-name{ font-weight:700; font-style:italic; }

/* ---------- Motifs, drawn by .nh-world-motif ---------- */
/* Western: faint stave lines behind the heading block */
[data-world="western"] .nh-world-motif,
[data-world="western"] .nh-page-pad h1,
[data-world="western"] .nh-page-pad h2{
  background-image:var(--world-motif);
  background-size:100% 29px; background-repeat:no-repeat; background-position:0 55%;
}
/* Hindustani: thin ornamental rule with a centred diamond underneath */
[data-world="hindustani"] .nh-world-motif{ position:relative; padding-bottom:18px; }
[data-world="hindustani"] .nh-world-motif::before{
  content:""; position:absolute; left:0; right:0; bottom:6px; height:1px;
  background:var(--world-motif); opacity:.7;
}
[data-world="hindustani"] .nh-world-motif::after{
  content:""; position:absolute; left:50%; bottom:2px; width:9px; height:9px;
  background:var(--highlight); border:1px solid var(--red-accent);
  transform:translateX(-50%) rotate(45deg);
}
/* Fusion: 3px diagonal two-tone edge across the top of the card */
[data-world="fusion"] .nh-world-motif{ position:relative; border-radius:var(--radius-lg); overflow:hidden; }
[data-world="fusion"] .nh-world-motif::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--world-motif);
}

/* ---------- Western tools: single-column list of horizontal rows ---------- */
[data-world="western"] .nh-tools-grid{ grid-template-columns:1fr; gap:10px; }
[data-world="western"] .nh-tool-card{
  display:grid; grid-template-columns:44px 1fr; column-gap:14px; row-gap:2px; align-items:center;
  text-align:left; border-width:1px; padding-block:10px;
}
[data-world="western"] .nh-tool-logo{ width:44px; height:44px; grid-row:1 / 3; }
[data-world="western"] .nh-tool-name, [data-world="western"] .nh-tool-blurb{ grid-column:2; margin:0; }

/* ---------- Mode switch and avatar/menu shape per world ---------- */
[data-world="western"] .nh-modes,
[data-world="western"] .nh-mode,
[data-world="western"] .nh-menu{ border-radius:var(--radius-md); }
[data-world="hindustani"] .nh-modes,
[data-world="hindustani"] .nh-mode,
[data-world="hindustani"] .nh-menu{ border-radius:var(--radius-lg); }
[data-world="fusion"] .nh-modes,
[data-world="fusion"] .nh-menu{ border-radius:var(--radius-lg); }
[data-world="fusion"] .nh-mode{ border-radius:var(--radius-md); }
[data-world] .nh-mode-on{ box-shadow:var(--shadow-1); }
[data-world="hindustani"] .nh-avatar{ box-shadow:0 0 0 2px var(--highlight); }
[data-world="fusion"] .nh-avatar{ box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--highlight); }

/* ---------- Fusion path levels: subtle teal/gold split-tone ---------- */
[data-world="fusion"] .nh-path-level{
  background-image:linear-gradient(135deg,rgba(31,58,74,.10) 0 50%,rgba(201,169,107,.18) 50% 100%);
}
[data-world="fusion"][data-theme="dark"] .nh-path-level{
  background-image:linear-gradient(135deg,rgba(42,85,104,.35) 0 50%,rgba(217,190,130,.16) 50% 100%);
}

/* Motion: the world styles add none; keep hover lifts calm if requested */
@media (prefers-reduced-motion:reduce){
  [data-world] .nh-path-level:hover{ transform:none; }
}