/**
 * Brand wash — skin.
 *
 * THIS IS THE FILE YOU EDIT PER PROJECT. Per-brand blocks are GENERATED:
 *
 *   node scripts/brand-skin.mjs shopify --hue 140 >> brand-wash.tokens.css
 *
 * COLOUR ONLY. --sp-brand-grain used to live here, and because the skin loads
 * after the structure file, this base rule silently beat every per-texture
 * grain value in brand-wash.css — every texture rendered at 0.055 and the
 * bands looked untextured. Grain is opacity, not colour; it belongs with the
 * texture that it is tuned for. Do not move it back.
 */

.sp-brand-wash {
  --sp-brand-wash-base: #ffffff;
  --sp-brand-wash-from: #f1f1ef;
  --sp-brand-wash-to: #f6f6f4;
}

:root.dark .sp-brand-wash,
[data-theme="dark"] .sp-brand-wash {
  --sp-brand-wash-base: #1c1c1e;
  --sp-brand-wash-from: #232326;
  --sp-brand-wash-to: #1f1f22;
}

/* ── Per-brand skins ────────────────────────────────────────────────────── */
/* Meta Ads — generated by scripts/brand-skin.mjs
 *
 * Source colour #0866ff (read from meta-icon.svg).
 * Label contrast 4.5:1 light, 5.26:1 dark — both clear WCAG AA.
 * Re-run the script rather than hand-tuning: the ink is derived from the tint,
 * so changing one by hand silently breaks the pair.
 *
 */
.sp-brand-chip[data-brand="meta-ads"],
.sp-brand-wash[data-brand="meta-ads"] {
  --sp-brand-tint: #e1edff;
  --sp-brand-ink: #005ef7;
  --sp-brand-border: #c9ddff;
  --sp-brand-glyph: #0866ff;
  --sp-brand-wash-from: #b5d1ff;
  --sp-brand-wash-via: #e1defa;
  --sp-brand-wash-to: #e6cbf6;
}

:root.dark .sp-brand-chip[data-brand="meta-ads"],
:root.dark .sp-brand-wash[data-brand="meta-ads"],
[data-theme="dark"] .sp-brand-chip[data-brand="meta-ads"],
[data-theme="dark"] .sp-brand-wash[data-brand="meta-ads"] {
  --sp-brand-tint: #182947;
  --sp-brand-ink: #509dff;
  --sp-brand-border: #163262;
  --sp-brand-glyph: #3e94ff;
  --sp-brand-wash-from: #15356b;
  --sp-brand-wash-via: #2f2b4e;
  --sp-brand-wash-to: #432457;
}

/* shopify — generated by scripts/brand-skin.mjs
 *
 * Source colour #95bf46 (read from shopify.svg).
 * Label contrast 4.5:1 light, 5.61:1 dark — both clear WCAG AA.
 * Re-run the script rather than hand-tuning: the ink is derived from the tint,
 * so changing one by hand silently breaks the pair.
 *
 */
.sp-brand-chip[data-brand="shopify"],
.sp-brand-wash[data-brand="shopify"] {
  --sp-brand-tint: #f2f7e9;
  --sp-brand-ink: #567c00;
  --sp-brand-border: #e8f1d6;
  --sp-brand-glyph: #739a15;
  --sp-brand-wash-from: #dfecc8;
  --sp-brand-wash-via: #e2f3e5;
  --sp-brand-wash-to: #bdf2e8;
}

:root.dark .sp-brand-chip[data-brand="shopify"],
:root.dark .sp-brand-wash[data-brand="shopify"],
[data-theme="dark"] .sp-brand-chip[data-brand="shopify"],
[data-theme="dark"] .sp-brand-wash[data-brand="shopify"] {
  --sp-brand-tint: #323925;
  --sp-brand-ink: #97be55;
  --sp-brand-border: #404d2a;
  --sp-brand-glyph: #95bf46;
  --sp-brand-wash-from: #45532c;
  --sp-brand-wash-via: #304535;
  --sp-brand-wash-to: #145147;
}

/* slack — generated by scripts/brand-skin.mjs
 *
 * Source colour #4a154b (read from slack-icon.svg).
 * Label contrast 11.09:1 light, 6.44:1 dark — both clear WCAG AA.
 * Re-run the script rather than hand-tuning: the ink is derived from the tint,
 * so changing one by hand silently breaks the pair.
 *
 */
.sp-brand-chip[data-brand="slack"],
.sp-brand-wash[data-brand="slack"] {
  --sp-brand-tint: #e9e3e9;
  --sp-brand-ink: #4a154b;
  --sp-brand-border: #d7ccd7;
  --sp-brand-glyph: #4a154b;
  --sp-brand-wash-from: #c3eefb;
  --sp-brand-wash-via: #f6bcce;
  --sp-brand-wash-to: #f9e8c0;
}

:root.dark .sp-brand-chip[data-brand="slack"],
:root.dark .sp-brand-wash[data-brand="slack"],
[data-theme="dark"] .sp-brand-chip[data-brand="slack"],
[data-theme="dark"] .sp-brand-wash[data-brand="slack"] {
  --sp-brand-tint: #241b26;
  --sp-brand-ink: #c58fc5;
  --sp-brand-border: #2a1a2c;
  --sp-brand-glyph: #c286c2;
  --sp-brand-wash-from: #255565;
  --sp-brand-wash-via: #5f1d32;
  --sp-brand-wash-to: #634f23;
}

/* Xero — generated by scripts/brand-skin.mjs
 *
 * Source colour #1fc0e7 (read from xero.svg).
 * Label contrast 4.5:1 light, 5.62:1 dark — both clear WCAG AA.
 * Re-run the script rather than hand-tuning: the ink is derived from the tint,
 * so changing one by hand silently breaks the pair.
 *
 */
.sp-brand-chip[data-brand="xero"],
.sp-brand-wash[data-brand="xero"] {
  --sp-brand-tint: #e4f7fc;
  --sp-brand-ink: #00799d;
  --sp-brand-border: #cef1fa;
  --sp-brand-glyph: #0099bf;
  --sp-brand-wash-from: #bcecf8;
  --sp-brand-wash-via: #e1f0fc;
  --sp-brand-wash-to: #e1e9ff;
}

:root.dark .sp-brand-chip[data-brand="xero"],
:root.dark .sp-brand-wash[data-brand="xero"],
[data-theme="dark"] .sp-brand-chip[data-brand="xero"],
[data-theme="dark"] .sp-brand-wash[data-brand="xero"] {
  --sp-brand-tint: #1d3a42;
  --sp-brand-ink: #40bfe1;
  --sp-brand-border: #1d4d5a;
  --sp-brand-glyph: #1fc0e7;
  --sp-brand-wash-from: #1d5462;
  --sp-brand-wash-via: #2e4150;
  --sp-brand-wash-to: #3d4662;
}

/* Acme Plumbing — generated by scripts/brand-skin.mjs
 *
 * Source colour #c0392b (given).
 * Label contrast 4.54:1 light, 5.6:1 dark — both clear WCAG AA.
 * Re-run the script rather than hand-tuning: the ink is derived from the tint,
 * so changing one by hand silently breaks the pair.
 *
 */
.sp-brand-chip[data-brand="acme-plumbing"],
.sp-brand-wash[data-brand="acme-plumbing"] {
  --sp-brand-tint: #f7e7e6;
  --sp-brand-ink: #c0392b;
  --sp-brand-border: #f1d3d0;
  --sp-brand-glyph: #c0392b;
  --sp-brand-wash-from: #ecc4bf;
  --sp-brand-wash-via: #efdccc;
  --sp-brand-wash-to: #e8d5bd;
}

:root.dark .sp-brand-chip[data-brand="acme-plumbing"],
:root.dark .sp-brand-wash[data-brand="acme-plumbing"],
[data-theme="dark"] .sp-brand-chip[data-brand="acme-plumbing"],
[data-theme="dark"] .sp-brand-wash[data-brand="acme-plumbing"] {
  --sp-brand-tint: #3a2120;
  --sp-brand-ink: #f77a68;
  --sp-brand-border: #4d2522;
  --sp-brand-glyph: #f76d5a;
  --sp-brand-wash-from: #542622;
  --sp-brand-wash-via: #402817;
  --sp-brand-wash-to: #452f15;
}

  --sp-brand-wash-to: #452f15;
}

/* Brassword prototype — a project skin added at the host seam. The structure
 * above remains the canonical Brand Wash implementation; only this colour
 * block belongs to the app. */
.sp-brand-wash[data-brand="brassword"] {
  --sp-brand-wash-from: #d9e9ff;
  --sp-brand-wash-via: #e8e2ff;
  --sp-brand-wash-to: #d9f3e8;
}

:root.dark .sp-brand-wash[data-brand="brassword"],
[data-theme="dark"] .sp-brand-wash[data-brand="brassword"] {
  --sp-brand-wash-from: #1e3a61;
  --sp-brand-wash-via: #352c57;
  --sp-brand-wash-to: #1b5141;
}

:root.dark[data-theme="brass"] .sp-brand-wash {
  --sp-brand-wash-base: #211f1b;
  --sp-brand-wash-from: #29261f;
  --sp-brand-wash-to: #201e1a;
}

:root.dark[data-theme="brass"] .sp-brand-wash[data-brand="brassword"] {
  --sp-brand-wash-base: #211f1b;
  --sp-brand-wash-from: #263b4b;
  --sp-brand-wash-via: #40331e;
  --sp-brand-wash-to: #25211a;
}