/* ============================================================
   Brand themes for WilsXie.com
   Warm Editorial (A) = default tokens in each page (no overrides here).
   Slate Modern (B)   = cool recolor (clean: just remaps Tailwind v4 vars).
   Noir Premium (C)   = full dark theme (vars + targeted utility overrides).
   Scope: html[data-brand="slate"] / html[data-brand="noir"].
   Warm is unaffected (no attribute).
   ============================================================ */

/* ---------- B · SLATE MODERN (light, cool, steel-blue accent) ---------- */
html[data-brand="slate"]{
  --color-ink-500:#6a7280; --color-ink-600:#525a68; --color-ink-700:#363d49;
  --color-ink-800:#222934; --color-ink-900:#161a21;
  --color-bone-50:#f5f6f7; --color-bone-100:#eceef1; --color-bone-200:#dde1e7; --color-bone-300:#a9b3c0;
  --color-gold-400:#5184ca; --color-gold-500:#2f5fa6; --color-gold-600:#244c86;
}
html[data-brand="slate"] body{ background:#f5f6f7 !important; color:#161a21; }
html[data-brand="slate"] .ph-stripes{ background-color:#dde1e7 !important; }

/* ---------- C · NOIR PREMIUM (dark, gold foil) ---------- */
html[data-brand="noir"]{
  /* light surfaces become dark */
  --color-bone-50:#14110d; --color-bone-100:#1b1712; --color-bone-200:#221d16; --color-bone-300:#3a342b;
  /* ink shades that are used as TEXT become light… */
  --color-ink-500:#a89d89; --color-ink-600:#c2b7a3; --color-ink-700:#d8cebd;
  /* …ink shades used as dark SECTION backgrounds stay dark */
  --color-ink-800:#17130d; --color-ink-900:#0d0b07;
  --color-gold-400:#dab483; --color-gold-500:#c4955f; --color-gold-600:#a87f4d;
}
html[data-brand="noir"] body{ background:#14110d !important; color:#f3ede2; }

/* Headings / strong text that were dark-ink-900/800 must go light on the now-dark surfaces.
   Attribute match also catches opacity variants (text-ink-900/60 etc.). */
html[data-brand="noir"] [class*="text-ink-9"]{ color:#f4eee3 !important; }
html[data-brand="noir"] [class*="text-ink-8"]{ color:#e7ddcc !important; }

/* Bone text (already light) stays light even though the bone var is now dark. */
html[data-brand="noir"] [class*="text-bone-50"],
html[data-brand="noir"] [class*="text-bone-100"]{ color:#f4eee3 !important; }
html[data-brand="noir"] [class*="text-bone-200"],
html[data-brand="noir"] [class*="text-bone-300"]{ color:#cabfab !important; }

/* White cards → dark coal surface */
html[data-brand="noir"] [class*="bg-white"]{ background-color:#1b1712 !important; }

/* Placeholder stripes + hairlines tuned for dark */
html[data-brand="noir"] .ph-stripes{
  background-color:#221d16 !important;
  background-image:linear-gradient(135deg, rgba(243,237,226,.07) 0 2px, transparent 2px 14px) !important;
}
html[data-brand="noir"] .ring-hairline{ box-shadow:inset 0 0 0 1px rgba(243,237,226,.12) !important; }

/* Borders that used dark ink lines → faint light lines */
html[data-brand="noir"] [class*="border-ink-"]{ border-color:rgba(243,237,226,.12) !important; }