/* Smoked Glass brand palettes. Standard since 2026-11-11 (Elijah: "looks good, this should be standard now").
   Load after tokens.css (and tokens-light.css). Rules: DESIGN.md "Brand palettes". Checked by check.mjs like the default.
   A brand palette changes colour only: the canvas, its three glows, the tint of the glass, the neutrals and the action.
   Type, shape, layout, components, and the state and area colours stay exactly as they are.

   The rule that came out of measuring them: a brand's signature colour is the LIGHT in the canvas, and the action
   colour is the brand's second colour. HVLP orange and Studio C red sit on top of the "no" red (OKLab distance 0.04
   to 0.08; under 0.10 reads as the same colour), and Tuthill gold on top of the "warning" amber (0.06 in light; the
   exact gold on dark is 0.12, just clear, but could not carry over to light), so as an action colour each would
   make a button, a "you changed this" chip and a status look alike.

   Use: add the brand class wherever sg-canvas / sg-light go (html and body, or the sg-scope root).
   Dark: .sg-brand-x:not(.sg-light). Light: .sg-light.sg-light.sg-brand-x (beats tokens-light.css whatever the load order).
   Colours come from each brand's own site: HVLP pixel-perfect/src/styles.css, studio-c-site-v2/public/kit/v2.css,
   Tuthill Site/media-glow-up-14/src/index.css. */

/* ================= Hudson Valley Listing Photos: navy, signal orange light, sky action ================= */
.sg-brand-hvlp:not(.sg-light) {
  --sg-canvas-top: #0c1220;
  --sg-canvas-mid: #101a31;
  --sg-canvas-end: #152646;
  --sg-canvas: linear-gradient(170deg, #0c1220 0%, #101a31 40%, #152646 100%);
  --sg-canvas-glow:
    radial-gradient(560px 560px at 86% 0%, rgba(255, 83, 20, 0.3), transparent 70%),
    radial-gradient(460px 460px at 62% 104%, rgba(20, 96, 200, 0.26), transparent 70%),
    radial-gradient(340px 340px at 100% 76%, rgba(255, 120, 50, 0.13), transparent 70%),
    linear-gradient(170deg, #0c1220 0%, #101a31 40%, #152646 100%);
  --sg-panel: rgba(9, 13, 23, 0.72);
  --sg-panel-2: rgba(21, 28, 45, 0.74);
  --sg-panel-solid: #0d1220;
  --sg-panel-2-solid: #151c2d;
  --sg-panel-edge: rgba(170, 200, 255, 0.1);
  --sg-panel-shadow: inset 0 1px 0 rgba(190, 215, 255, 0.05);
  --sg-bar: rgba(12, 17, 29, 0.92);
  --sg-overlay: rgba(12, 17, 29, 0.96);
  --sg-ink: #e9edf5;
  --sg-muted: #a2abc0;
  --sg-faint: #808aa4;
  --sg-line: rgba(150, 180, 235, 0.09);
  --sg-line-strong: rgba(150, 180, 235, 0.18);
  --sg-selected: rgba(21, 28, 45, 0.74);
  --sg-selection: rgba(69, 184, 245, 0.32);
  --sg-action: #52bdf6;
  --sg-action-hover: #74ccfa;
  --sg-action-ink: #04192a;
  --sg-action-soft: rgba(82, 189, 246, 0.16);
}
.sg-light.sg-light.sg-brand-hvlp {
  --sg-canvas-top: #f8f7f5;
  --sg-canvas-mid: #f4f2ee;
  --sg-canvas-end: #eeeae3;
  --sg-canvas: linear-gradient(170deg, #f8f7f5 0%, #f4f2ee 45%, #eeeae3 100%);
  --sg-canvas-glow:
    radial-gradient(620px 620px at 86% 0%, rgba(255, 83, 20, 0.13), transparent 70%),
    radial-gradient(520px 520px at 62% 104%, rgba(13, 158, 222, 0.1), transparent 70%),
    radial-gradient(380px 380px at 100% 76%, rgba(255, 120, 50, 0.07), transparent 70%),
    linear-gradient(170deg, #f8f7f5 0%, #f4f2ee 45%, #eeeae3 100%);
  --sg-panel-edge: rgba(17, 22, 34, 0.1);
  --sg-panel-shadow: 0 1px 2px rgba(17, 22, 34, 0.04), 0 8px 24px rgba(17, 22, 34, 0.06);
  --sg-bar: rgba(251, 250, 248, 0.92);
  --sg-overlay-shadow: 0 24px 80px rgba(17, 22, 34, 0.2);
  --sg-scrim: rgba(17, 22, 34, 0.32);
  --sg-ink: #111622;
  --sg-muted: #4d556b;
  --sg-faint: #646c82;
  --sg-line: rgba(17, 22, 34, 0.1);
  --sg-line-strong: rgba(17, 22, 34, 0.2);
  --sg-hover: rgba(17, 22, 34, 0.05);
  --sg-press: rgba(17, 22, 34, 0.09);
  --sg-selected: rgba(17, 22, 34, 0.09);
  --sg-selection: rgba(13, 158, 222, 0.22);
  --sg-action: #0a689a;
  --sg-action-hover: #085783;
  --sg-action-ink: #ffffff;
  --sg-action-soft: rgba(13, 158, 222, 0.12);
}

/* ================= Studio C: black, red light, cream action ================= */
.sg-brand-studioc:not(.sg-light) {
  --sg-canvas-top: #0a0a0c;
  --sg-canvas-mid: #120b0f;
  --sg-canvas-end: #1f0d14;
  --sg-canvas: linear-gradient(170deg, #0a0a0c 0%, #120b0f 40%, #1f0d14 100%);
  --sg-canvas-glow:
    radial-gradient(560px 560px at 86% 0%, rgba(224, 27, 56, 0.36), transparent 70%),
    radial-gradient(460px 460px at 62% 104%, rgba(150, 18, 48, 0.3), transparent 70%),
    radial-gradient(340px 340px at 100% 76%, rgba(255, 45, 74, 0.16), transparent 70%),
    linear-gradient(170deg, #0a0a0c 0%, #120b0f 40%, #1f0d14 100%);
  --sg-panel: rgba(9, 9, 11, 0.72);
  --sg-panel-2: rgba(27, 24, 26, 0.76);
  --sg-panel-solid: #0e0d0f;
  --sg-panel-2-solid: #1b181a;
  --sg-panel-edge: rgba(255, 236, 232, 0.09);
  --sg-panel-shadow: inset 0 1px 0 rgba(255, 240, 235, 0.05);
  --sg-bar: rgba(12, 11, 13, 0.92);
  --sg-overlay: rgba(14, 13, 15, 0.96);
  --sg-scrim: rgba(4, 4, 5, 0.62);
  --sg-ink: #f4f1e9;
  --sg-muted: #aca7a1;
  --sg-faint: #8b8681;
  --sg-line: rgba(244, 241, 233, 0.09);
  --sg-line-strong: rgba(244, 241, 233, 0.18);
  --sg-selected: rgba(27, 24, 26, 0.76);
  --sg-selection: rgba(224, 27, 56, 0.4);
  --sg-action: #f4f1e9;
  --sg-action-hover: #ffffff;
  --sg-action-ink: #0a0a0c;
  --sg-action-soft: rgba(244, 241, 233, 0.14);
}
.sg-light.sg-light.sg-brand-studioc {
  --sg-canvas-top: #f6f3ec;
  --sg-canvas-mid: #f4f1e9;
  --sg-canvas-end: #efe9df;
  --sg-canvas: linear-gradient(170deg, #f6f3ec 0%, #f4f1e9 45%, #efe9df 100%);
  --sg-canvas-glow:
    radial-gradient(620px 620px at 86% 0%, rgba(224, 27, 56, 0.13), transparent 70%),
    radial-gradient(520px 520px at 62% 104%, rgba(224, 27, 56, 0.07), transparent 70%),
    radial-gradient(380px 380px at 100% 76%, rgba(255, 45, 74, 0.06), transparent 70%),
    linear-gradient(170deg, #f6f3ec 0%, #f4f1e9 45%, #efe9df 100%);
  --sg-panel-edge: rgba(10, 10, 12, 0.1);
  --sg-panel-shadow: 0 1px 2px rgba(10, 10, 12, 0.04), 0 8px 24px rgba(10, 10, 12, 0.06);
  --sg-bar: rgba(250, 248, 243, 0.92);
  --sg-overlay-shadow: 0 24px 80px rgba(10, 10, 12, 0.22);
  --sg-scrim: rgba(10, 10, 12, 0.36);
  --sg-ink: #0a0a0c;
  --sg-muted: #55534f;
  --sg-faint: #6a6763;
  --sg-line: rgba(10, 10, 12, 0.1);
  --sg-line-strong: rgba(10, 10, 12, 0.2);
  --sg-hover: rgba(10, 10, 12, 0.05);
  --sg-press: rgba(10, 10, 12, 0.09);
  --sg-selected: rgba(10, 10, 12, 0.09);
  --sg-selection: rgba(224, 27, 56, 0.2);
  --sg-action: #0a0a0c;
  --sg-action-hover: #2a282a;
  --sg-action-ink: #f4f1e9;
  --sg-action-soft: rgba(10, 10, 12, 0.08);
}

/* ================= Tuthill Design: warm charcoal, gold light, cream action ================= */
.sg-brand-tuthill:not(.sg-light) {
  --sg-canvas-top: #12100e;
  --sg-canvas-mid: #1a1612;
  --sg-canvas-end: #272017;
  --sg-canvas: linear-gradient(170deg, #12100e 0%, #1a1612 40%, #272017 100%);
  --sg-canvas-glow:
    radial-gradient(560px 560px at 86% 0%, rgba(192, 154, 89, 0.26), transparent 70%),
    radial-gradient(460px 460px at 62% 104%, rgba(168, 121, 74, 0.2), transparent 70%),
    radial-gradient(340px 340px at 100% 76%, rgba(214, 170, 140, 0.11), transparent 70%),
    linear-gradient(170deg, #12100e 0%, #1a1612 40%, #272017 100%);
  --sg-panel: rgba(13, 11, 9, 0.72);
  --sg-panel-2: rgba(30, 27, 23, 0.76);
  --sg-panel-solid: #100e0c;
  --sg-panel-2-solid: #1e1b17;
  --sg-panel-edge: rgba(255, 236, 200, 0.09);
  --sg-panel-shadow: inset 0 1px 0 rgba(255, 240, 215, 0.05);
  --sg-bar: rgba(17, 15, 12, 0.92);
  --sg-overlay: rgba(18, 16, 13, 0.96);
  --sg-scrim: rgba(6, 5, 4, 0.62);
  --sg-ink: #f1ede4;
  --sg-muted: #ada69a;
  --sg-faint: #8d8679;
  --sg-line: rgba(241, 232, 210, 0.09);
  --sg-line-strong: rgba(241, 232, 210, 0.18);
  --sg-selected: rgba(30, 27, 23, 0.76);
  --sg-selection: rgba(192, 154, 89, 0.4);
  --sg-action: #f1ede4;
  --sg-action-hover: #ffffff;
  --sg-action-ink: #1a1612;
  --sg-action-soft: rgba(241, 237, 228, 0.14);
}
.sg-light.sg-light.sg-brand-tuthill {
  --sg-canvas-top: #f8f6f2;
  --sg-canvas-mid: #f4f1ea;
  --sg-canvas-end: #ece6da;
  --sg-canvas: linear-gradient(170deg, #f8f6f2 0%, #f4f1ea 45%, #ece6da 100%);
  --sg-canvas-glow:
    radial-gradient(620px 620px at 86% 0%, rgba(192, 154, 89, 0.24), transparent 70%),
    radial-gradient(520px 520px at 62% 104%, rgba(168, 121, 74, 0.14), transparent 70%),
    radial-gradient(380px 380px at 100% 76%, rgba(192, 154, 89, 0.12), transparent 70%),
    linear-gradient(170deg, #f8f6f2 0%, #f4f1ea 45%, #ece6da 100%);
  --sg-panel-edge: rgba(42, 38, 34, 0.11);
  --sg-panel-shadow: 0 1px 2px rgba(42, 38, 34, 0.04), 0 8px 24px rgba(42, 38, 34, 0.06);
  --sg-bar: rgba(251, 249, 245, 0.92);
  --sg-overlay-shadow: 0 24px 80px rgba(42, 38, 34, 0.2);
  --sg-scrim: rgba(42, 38, 34, 0.34);
  --sg-ink: #2a2622;
  --sg-muted: #5a534a;
  --sg-faint: #6b6459;
  --sg-line: rgba(42, 38, 34, 0.1);
  --sg-line-strong: rgba(42, 38, 34, 0.2);
  --sg-hover: rgba(42, 38, 34, 0.05);
  --sg-press: rgba(42, 38, 34, 0.09);
  --sg-selected: rgba(42, 38, 34, 0.09);
  --sg-selection: rgba(192, 154, 89, 0.3);
  --sg-action: #2a2622;
  --sg-action-hover: #45403a;
  --sg-action-ink: #f8f6f2;
  --sg-action-soft: rgba(42, 38, 34, 0.08);
}

/* ================= the same fallbacks as tokens.css, per brand =================
   A brand block outranks ":root, .sg-scope", so the system-setting blocks in tokens.css would lose to it.
   Each is repeated here with the brand's own values. */

/* "Reduce transparency": solid glass (the blur is already switched off by tokens.css) */
@media (prefers-reduced-transparency: reduce) {
  .sg-brand-hvlp:not(.sg-light) { --sg-panel: #0d1220; --sg-panel-2: #151c2d; --sg-bar: #0d1220; --sg-overlay: #0d1220; }
  .sg-brand-studioc:not(.sg-light) { --sg-panel: #0e0d0f; --sg-panel-2: #1b181a; --sg-bar: #0e0d0f; --sg-overlay: #0e0d0f; }
  .sg-brand-tuthill:not(.sg-light) { --sg-panel: #100e0c; --sg-panel-2: #1e1b17; --sg-bar: #100e0c; --sg-overlay: #100e0c; }
  .sg-light.sg-light.sg-brand-hvlp { --sg-bar: #fbfaf8; }
  .sg-light.sg-light.sg-brand-studioc { --sg-bar: #faf8f3; }
  .sg-light.sg-light.sg-brand-tuthill { --sg-bar: #fbf9f5; }
}
/* "More contrast": brighter secondary text, firmer lines */
@media (prefers-contrast: more) {
  .sg-brand-hvlp:not(.sg-light) { --sg-muted: #c6ccda; --sg-faint: #a2abc0; --sg-line: rgba(150, 180, 235, 0.22); --sg-line-strong: rgba(150, 180, 235, 0.42); --sg-panel-edge: rgba(170, 200, 255, 0.3); }
  .sg-brand-studioc:not(.sg-light) { --sg-muted: #cdc8c2; --sg-faint: #aca7a1; --sg-line: rgba(244, 241, 233, 0.22); --sg-line-strong: rgba(244, 241, 233, 0.42); --sg-panel-edge: rgba(255, 236, 232, 0.3); }
  .sg-brand-tuthill:not(.sg-light) { --sg-muted: #cdc6ba; --sg-faint: #ada69a; --sg-line: rgba(241, 232, 210, 0.22); --sg-line-strong: rgba(241, 232, 210, 0.42); --sg-panel-edge: rgba(255, 236, 200, 0.3); }
  .sg-light.sg-light.sg-brand-hvlp { --sg-muted: #373e52; --sg-faint: #4d556b; --sg-line: rgba(17, 22, 34, 0.24); --sg-line-strong: rgba(17, 22, 34, 0.45); --sg-panel-edge: rgba(17, 22, 34, 0.35); }
  .sg-light.sg-light.sg-brand-studioc { --sg-muted: #3c3a37; --sg-faint: #55534f; --sg-line: rgba(10, 10, 12, 0.24); --sg-line-strong: rgba(10, 10, 12, 0.45); --sg-panel-edge: rgba(10, 10, 12, 0.35); }
  .sg-light.sg-light.sg-brand-tuthill { --sg-muted: #403a33; --sg-faint: #5a534a; --sg-line: rgba(42, 38, 34, 0.24); --sg-line-strong: rgba(42, 38, 34, 0.45); --sg-panel-edge: rgba(42, 38, 34, 0.35); }
}
/* paper: no canvas, black on white, whatever the brand */
@media print {
  .sg-brand-hvlp:not(.sg-light), .sg-brand-studioc:not(.sg-light), .sg-brand-tuthill:not(.sg-light),
  .sg-light.sg-light.sg-brand-hvlp, .sg-light.sg-light.sg-brand-studioc, .sg-light.sg-light.sg-brand-tuthill { --sg-canvas-glow: none; --sg-canvas-mid: #ffffff; --sg-panel: #ffffff; --sg-panel-2: #f3f3f6; --sg-bar: #ffffff; --sg-ink: #111111; --sg-muted: #444444; --sg-faint: #666666; --sg-line: #dddddd; --sg-line-strong: #bbbbbb; --sg-panel-edge: #bbbbbb; --sg-panel-shadow: none; --sg-action: #111111; --sg-action-ink: #ffffff; }
}