/* Multify web app — Look layer (the stash app's "Looks" on app.multify.co).
 *
 * One block per Look, keyed off html[data-persona], which header.ejs stamps
 * server-side from sc_users.stash_theme (or the mf_look cookie when signed out;
 * mf-light Multify Light when neither is set). header.ejs also stamps data-bs-theme from
 * the Look's `scheme` (lib/stash-themes.js), so Bootstrap and every
 * [data-bs-theme] rule follow the Look's light/dark base.
 *
 * Token vocabulary is the MAIN-APP one (header.ejs :root), not stash.css's lp3
 * contract. Palette values mirror the dashboard-token bridge in
 * stash/public/stash-persona.css and the extension's sidepanel/persona.css.
 * `html[data-persona]` (0,1,1) outranks header.ejs's :root and
 * [data-bs-theme="light"] (0,1,0) regardless of source order.
 *
 * Beyond the palette a Look sets:
 *   --app-font / --app-font-display   body + heading faces (fonts loaded via the
 *                                     Look's fontsHref, <link id="mf-look-fonts">)
 *   --radius-card / -control / -pill  consumed by .sc-card, .sc-dialog, .sc-input,
 *                                     .btn-sc (fallback 0 = the app's square corners)
 *   --btn-primary-bg / -fg / -bg-hover  the .btn-sc-primary fill (stash CTAs are
 *                                     accent-filled; fallback is ink-inverse)
 *
 * KEPT IN SYNC with lib/stash-themes.js — scripts/check-extension-themes.js
 * asserts a block with the required tokens exists here for every Look.
 * Adding a Look: devnotes/stash/THEMING.md → "Adding a new Look".
 */

/* ── mf-light · Multify Light — the multify.co home page: white, hairlines,
   square corners, Instrument Sans, yellow as a highlighter (default) ─────── */
html[data-persona="mf-light"] {
  color-scheme: light;
  --bg-primary: #FFFFFF;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F7F7F7;
  --hover: rgba(15, 15, 15, 0.06);
  --text-primary: #0F0F0F;
  --text-secondary: #666666;
  --border: #E0E0E0;
  --border-color: #E0E0E0;
  --accent: #0F0F0F;
  --accent-fg: #FFFFFF;
  --accent-hover: #333333;
  --hl: #FFCE33;
  --hl-fg: #0F0F0F;
  --link: #0F0F0F;
  --success: #16A34A;
  --warning: #B7791F;
  --error: #DC2626;
  --info: #555555;
  --spark: #FFCE33;
  --spark-soft: rgba(255, 206, 51, 0.35);
  --btn-primary-bg: #0F0F0F;
  --btn-primary-fg: #FFFFFF;
  --btn-primary-bg-hover: #333333;
  --btn-primary-hover: #333333;
  --icon-filter: brightness(0);
  --app-font: 'Instrument Sans', -apple-system, sans-serif;
  --app-font-display: 'Instrument Sans', -apple-system, sans-serif;
  --radius-card: 0;
  --radius-control: 0;
  --radius-pill: 999px;
}

/* ── mf-dark · Multify Dark — the same page with the lights off ──────────── */
html[data-persona="mf-dark"] {
  color-scheme: dark;
  --bg-primary: #0F0F0F;
  --bg-secondary: #0F0F0F;
  --bg-tertiary: #1A1A1A;
  --hover: rgba(255, 255, 255, 0.08);
  --text-primary: #FFFFFF;
  --text-secondary: #A0A0A0;
  --border: #333333;
  --border-color: #333333;
  --accent: #FFFFFF;
  --accent-fg: #0F0F0F;
  --accent-hover: #CCCCCC;
  --hl: #FFC426;
  --hl-fg: #0F0F0F;
  --link: #FFFFFF;
  --success: #22C55E;
  --warning: #F5C000;
  --error: #F87171;
  --info: #808080;
  --spark: #FFC426;
  --spark-soft: rgba(255, 196, 38, 0.35);
  --btn-primary-bg: #FFFFFF;
  --btn-primary-fg: #0F0F0F;
  --btn-primary-bg-hover: #CCCCCC;
  --btn-primary-hover: #CCCCCC;
  --icon-filter: brightness(0) invert(1);
  --app-font: 'Instrument Sans', -apple-system, sans-serif;
  --app-font-display: 'Instrument Sans', -apple-system, sans-serif;
  --radius-card: 0;
  --radius-control: 0;
  --radius-pill: 999px;
}

/* mf-light + mf-dark share one design. --accent is INK (the site's one colour
   is black or white): the dashboard paints --accent as text in dozens of rules
   and yellow on white is 1.6:1. The yellow is --hl / --hl-fg, defined only on
   these two Looks, and it goes where a highlighter would: the chosen Look
   card, the Current badge, the active rail link's bar, the spark line
   (--spark), the thinking sweep's peak, text selection. Links are ink with a
   hairline underline (the site's border-bottom links); headings are the
   site's 700, slightly tight. */
html[data-persona="mf-light"] .sc-page-header h1,
html[data-persona="mf-dark"] .sc-page-header h1,
html[data-persona="mf-light"] .mcp-page-title,
html[data-persona="mf-dark"] .mcp-page-title,
html[data-persona="mf-light"] .sc-dialog-title:not(.sc-title-body-font),
html[data-persona="mf-dark"] .sc-dialog-title:not(.sc-title-body-font) {
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Prose links only (paragraphs, list items, table cells, chat bubbles): the
   dashboard's nav, cards and promos are anchors too and must not underline. */
html[data-persona="mf-light"] :is(p, li, td, .qc-bubble, .sc-md) a:where(:not(.btn):not(.btn-sc):not([class*="btn-"])),
html[data-persona="mf-dark"] :is(p, li, td, .qc-bubble, .sc-md) a:where(:not(.btn):not(.btn-sc):not([class*="btn-"])) {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--border);
}
html[data-persona="mf-light"] :is(p, li, td, .qc-bubble, .sc-md) a:where(:not(.btn):not(.btn-sc):not([class*="btn-"])):hover,
html[data-persona="mf-dark"] :is(p, li, td, .qc-bubble, .sc-md) a:where(:not(.btn):not(.btn-sc):not([class*="btn-"])):hover {
  text-decoration-color: currentColor;
}
html[data-persona="mf-light"] .chat-mode-btn.active,
html[data-persona="mf-dark"] .chat-mode-btn.active,
html[data-persona="mf-light"][data-nav-mode="explore"] .chat-mode-btn[data-mode="explore"],
html[data-persona="mf-dark"][data-nav-mode="explore"] .chat-mode-btn[data-mode="explore"],
html[data-persona="mf-light"][data-nav-mode="create"] .chat-mode-btn[data-mode="create"],
html[data-persona="mf-dark"][data-nav-mode="create"] .chat-mode-btn[data-mode="create"] { background: var(--hl); color: var(--hl-fg); }
html[data-persona="mf-light"] .mf-look-card.is-on,
html[data-persona="mf-dark"] .mf-look-card.is-on { border-color: var(--hl); box-shadow: inset 0 0 0 1px var(--hl); }
html[data-persona="mf-light"] .mf-look-current,
html[data-persona="mf-dark"] .mf-look-current { background: var(--hl); color: var(--hl-fg); padding: 0.1rem 0.45rem; }
html[data-persona="mf-light"] .sc-settings-toc-link.active,
html[data-persona="mf-dark"] .sc-settings-toc-link.active { color: var(--text-primary); border-left-color: var(--hl); font-weight: 600; }
html[data-persona="mf-light"] .qc-thinking-shimmer,
html[data-persona="mf-dark"] .qc-thinking-shimmer {
  background-image: linear-gradient(90deg, var(--text-secondary) 0%, var(--text-secondary) 40%, var(--text-primary) 46%, var(--hl) 50%, var(--text-primary) 54%, var(--text-secondary) 60%, var(--text-secondary) 100%);
}
html[data-persona="mf-light"] ::selection,
html[data-persona="mf-dark"] ::selection { background: var(--hl); color: var(--hl-fg); }

/* ── lp1 · Editorial — paper, ink, and one Klein blue accent ─────────────── */
html[data-persona="lp1"] {
  color-scheme: light;
  --bg-primary: #FAF6EE;
  --bg-secondary: #FFFDF7;
  --bg-tertiary: #F3EEE3;
  --hover: rgba(20, 20, 20, 0.06);
  --text-primary: #141414;
  --text-secondary: #5C574B;
  --border: #D8D2C4;
  --border-color: #D8D2C4;
  --accent: #002FA7;
  --accent-fg: #ffffff;
  --accent-hover: #00227D;
  --link: #002FA7;
  --success: #2F7D46;
  --warning: #B7791F;
  --error: #9B2915;
  --info: #002FA7;
  --spark: #002FA7;
  --spark-soft: rgba(0, 47, 167, 0.28);
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: var(--accent-fg);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-hover: #2E2E2E;
  --icon-filter: brightness(0);
  --app-font: 'Archivo', 'Instrument Sans', -apple-system, sans-serif;
  --app-font-display: 'Anton', 'Archivo', sans-serif;
  --radius-card: 0;
  --radius-control: 0;
  --radius-pill: 0;
}
/* Anton ships a single 400 weight; synthesized bold looks smeared. */
html[data-persona="lp1"] .sc-page-header h1,
html[data-persona="lp1"] .mcp-page-title,
html[data-persona="lp1"] .sc-dialog-title:not(.sc-title-body-font) {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── lp2 · Scrapbook — warm paper, tomato, tape-yellow, handwritten ──────── */
html[data-persona="lp2"] {
  color-scheme: light;
  --bg-primary: #F6EFDF;
  --bg-secondary: #FFFBF0;
  --bg-tertiary: #EFE6D2;
  --hover: rgba(43, 38, 34, 0.07);
  --text-primary: #2B2622;
  --text-secondary: #6E655A;
  --border: #D6CCB8;
  --border-color: #D6CCB8;
  --accent: #E5372B;
  --accent-fg: #ffffff;
  --accent-hover: #C42A1F;
  --link: #C42A1F;
  --success: #2F7D46;
  --warning: #B7791F;
  --error: #C42A1F;
  --info: #2F5D8A;
  --spark: #E5372B;
  --spark-soft: rgba(229, 55, 43, 0.28);
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: var(--accent-fg);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-hover: #443E38;
  --icon-filter: brightness(0);
  --app-font: 'Karla', 'Instrument Sans', -apple-system, sans-serif;
  --app-font-display: 'Fraunces', Georgia, serif;
  --radius-card: 0;
  --radius-control: 0;
  --radius-pill: 0;
}
html[data-persona="lp2"] .sc-page-header h1,
html[data-persona="lp2"] .mcp-page-title,
html[data-persona="lp2"] .sc-dialog-title:not(.sc-title-body-font) {
  font-weight: 900;
}

/* ── lp3 · Sticker shop — saturated panels, thick ink outlines ───────────── */
html[data-persona="lp3"] {
  color-scheme: light;
  --bg-primary: #FFF6E8;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #FFF0D1;
  --hover: rgba(255, 201, 49, 0.45);
  --text-primary: #141414;
  --text-secondary: #3a3a3a;
  --border: #141414;
  --border-color: #141414;
  --accent: #FF2E00;
  --accent-fg: #ffffff;
  --accent-hover: #D92700;
  --link: #141414;
  --success: #128a3e;
  --warning: #B7791F;
  --error: #D92700;
  --info: #1478C8;
  --spark: #37B0FF;
  --spark-soft: rgba(55, 176, 255, 0.35);
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: var(--accent-fg);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-hover: #2E2E2E;
  --icon-filter: brightness(0);
  --app-font: 'Nunito', 'Instrument Sans', -apple-system, sans-serif;
  --app-font-display: 'Fredoka', 'Nunito', sans-serif;
  --radius-card: 18px;
  --radius-control: 14px;
  --radius-pill: 999px;
}
html[data-persona="lp3"] .sc-page-header h1,
html[data-persona="lp3"] .mcp-page-title,
html[data-persona="lp3"] .sc-dialog-title:not(.sc-title-body-font) {
  font-weight: 600;
}

/* ── lp4 · Neon arcade — near-black, lime and cyan (dark) ────────────────── */
html[data-persona="lp4"] {
  color-scheme: dark;
  --bg-primary: #0A0C0A;
  --bg-secondary: #121512;
  --bg-tertiary: #1A1F1A;
  --hover: #1A1F1A;
  --text-primary: #E8F0E4;
  --text-secondary: #7C857A;
  --border: #263026;
  --border-color: #263026;
  --accent: #B6FF2E;
  --accent-fg: #0A0C0A;
  --accent-hover: #A3E529;
  --link: #2EF2FF;
  --success: #B6FF2E;
  --warning: #FFC53D;
  --error: #FF6B1A;
  --info: #2EF2FF;
  --spark: #2EF2FF;
  --spark-soft: rgba(46, 242, 255, 0.35);
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: var(--accent-fg);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-hover: #D3DDCF;
  --icon-filter: brightness(0) invert(1);
  --app-font: 'IBM Plex Sans', 'Instrument Sans', -apple-system, sans-serif;
  --app-font-display: 'Chakra Petch', 'IBM Plex Sans', sans-serif;
  --radius-card: 2px;
  --radius-control: 2px;
  --radius-pill: 2px;
}
html[data-persona="lp4"] .sc-page-header h1,
html[data-persona="lp4"] .mcp-page-title,
html[data-persona="lp4"] .sc-dialog-title:not(.sc-title-body-font) {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── lp6 · Lights out — black, hairlines, one blue (dark) ────────────────── */
html[data-persona="lp6"] {
  color-scheme: dark;
  --bg-primary: #000000;
  --bg-secondary: #000000;
  --bg-tertiary: #16181C;
  --hover: rgba(231, 233, 234, 0.1);
  --text-primary: #E7E9EA;
  --text-secondary: #71767B;
  --border: #2F3336;
  --border-color: #2F3336;
  --accent: #1D9BF0;
  --accent-fg: #ffffff;
  --accent-hover: #1A8CD8;
  --link: #1D9BF0;
  --success: #00BA7C;
  --warning: #FFD400;
  --error: #F4212E;
  --info: #1D9BF0;
  --spark: #1D9BF0;
  --spark-soft: rgba(29, 155, 240, 0.35);
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: var(--accent-fg);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-hover: #D7DBDC;
  --icon-filter: brightness(0) invert(1);
  --app-font: 'Geist', 'Instrument Sans', -apple-system, sans-serif;
  --app-font-display: 'Geist', 'Instrument Sans', sans-serif;
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-pill: 999px;
}

/* ── lp7 · Daylight — white, hairlines, one blue (default) ───────────────── */
html[data-persona="lp7"] {
  color-scheme: light;
  --bg-primary: #FFFFFF;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F7F9F9;
  --hover: rgba(15, 20, 25, 0.1);
  --text-primary: #0F1419;
  --text-secondary: #536471;
  --border: #CFD9DE;
  --border-color: #CFD9DE;
  --accent: #1D9BF0;
  --accent-fg: #ffffff;
  --accent-hover: #1A8CD8;
  --link: #1D9BF0;
  --success: #00BA7C;
  --warning: #B7791F;
  --error: #F4212E;
  --info: #1D9BF0;
  --spark: #1D9BF0;
  --spark-soft: rgba(29, 155, 240, 0.30);
  --btn-primary-bg: var(--accent);
  --btn-primary-fg: var(--accent-fg);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-hover: #272C30;
  --icon-filter: brightness(0);
  --app-font: 'Geist', 'Instrument Sans', -apple-system, sans-serif;
  --app-font-display: 'Geist', 'Instrument Sans', sans-serif;
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-pill: 999px;
}

/* lp6 + lp7 share one design: hierarchy from weight (X-flat scale, no tracking). */
html[data-persona="lp6"] .sc-page-header h1,
html[data-persona="lp6"] .mcp-page-title,
html[data-persona="lp6"] .sc-dialog-title:not(.sc-title-body-font),
html[data-persona="lp7"] .sc-page-header h1,
html[data-persona="lp7"] .mcp-page-title,
html[data-persona="lp7"] .sc-dialog-title:not(.sc-title-body-font) {
  font-weight: 800;
}

/* White-fill vendor marks on light Looks. The OpenAI knot, Qwen wordmark, and
 * xAI mark ship white-on-transparent: correct on dark, invisible on light.
 * brightness(0) renders them black under any light Look; dark Looks keep the
 * raw assets. Scoped to the model icon path so app and catalog marks are
 * untouched. Keep in sync with the desktop rules and mobile tint set. */
html[data-bs-theme="light"] img[src$="model-providers/openai.svg"],
html[data-bs-theme="light"] img[src$="model-providers/qwen.svg"],
html[data-bs-theme="light"] img[src$="model-providers/x-ai.svg"] {
  filter: brightness(0);
}