/* 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;
 * lp7 Daylight 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".
 */

/* ── 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;
}