/* The accent-colour system, shared by EVERY operator-facing screen.

   This lives in its own stylesheet, loaded by both halves' base layouts,
   because it used to sit inside the chat half's main.css - which meant the
   appearance picker only actually recoloured half the product, and the
   admin half stayed brand-yellow no matter what was chosen. A control that
   works on some screens and silently does nothing on others is worse than
   no control, which is why the picker was pulled entirely before this
   existed.

   The Lightmorphic palette: 19 hues, each defining a light and a dark
   variant, with the resolution blocks below picking between them for the
   current theme. Every derived value (hover, the soft container fill, and
   the text colour on each) is generated from the base hue and checked
   against WCAG AA - the base hex is never adjusted to make text work,
   only the text is. The resolved values are published
   under two sets of names:
     --accent / --accent-hover / --accent-container / --on-accent /
     --on-accent-container   (product-neutral - what new code should use)
     --aw-primary / ...      (the chat half's existing names, kept as
                              aliases so none of that CSS needed touching)
   The admin half maps its own --sm-primary family onto these too, so one
   choice genuinely repaints the whole app. */

:root[data-accent="red"] {
  --accent-light: #f34236; --accent-hover-light: #d63a30;
  --accent-container-light: #fee8e7; --on-accent-container-light: #5c1915;
  --accent-dark: #f34236; --accent-hover-dark: #f4594e;
  --accent-container-dark: #491410; --on-accent-container-dark: #faaaa5;
  --on-accent: #350f0c;
}
:root[data-accent="pink"] {
  --accent-light: #e8207e; --accent-hover-light: #cc1c6f;
  --accent-container-light: #fce4f0; --on-accent-container-light: #580c30;
  --accent-dark: #e8207e; --accent-hover-dark: #eb3b8d;
  --accent-container-dark: #460a26; --on-accent-container-dark: #f59bc5;
  --on-accent: #1e0410;
}
:root[data-accent="purple"] {
  --accent-light: #9b26ae; --accent-hover-light: #882199;
  --accent-container-light: #f3e5f5; --on-accent-container-light: #3b0e42;
  --accent-dark: #b763c5; --accent-hover-dark: #c076cc;
  --accent-container-dark: #46114e; --on-accent-container-dark: #d29ddb;
  --on-accent: #ffffff;
}
:root[data-accent="deep_purple"] {
  --accent-light: #6639ab; --accent-hover-light: #5a3296;
  --accent-container-light: #ede7f5; --on-accent-container-light: #271641;
  --accent-dark: #9170c3; --accent-hover-dark: #9e82ca;
  --accent-container-dark: #2e1a4d; --on-accent-container-dark: #baa6d9;
  --on-accent: #ffffff;
}
:root[data-accent="indigo"] {
  --accent-light: #3d51b4; --accent-hover-light: #36479e;
  --accent-container-light: #e8eaf6; --on-accent-container-light: #171f44;
  --accent-dark: #7382c9; --accent-hover-dark: #8491cf;
  --accent-container-dark: #1b2451; --on-accent-container-dark: #a8b1dd;
  --on-accent: #ffffff;
}
:root[data-accent="blue"] {
  --accent-light: #2295f1; --accent-hover-light: #1e83d4;
  --accent-container-light: #e4f2fd; --on-accent-container-light: #0d395c;
  --accent-dark: #2295f1; --accent-hover-dark: #3da2f3;
  --accent-container-dark: #0a2d48; --on-accent-container-dark: #9ccff9;
  --on-accent: #0a2a43;
}
:root[data-accent="light_blue"] {
  --accent-light: #03a8f3; --accent-hover-light: #0394d6;
  --accent-container-light: #e1f5fe; --on-accent-container-light: #01405c;
  --accent-dark: #03a8f3; --accent-hover-dark: #21b2f4;
  --accent-container-dark: #013249; --on-accent-container-dark: #8ed8fa;
  --on-accent: #013953;
}
:root[data-accent="cyan"] {
  --accent-light: #00bcd3; --accent-hover-light: #00a5ba;
  --accent-container-light: #e0f7fa; --on-accent-container-light: #004750;
  --accent-dark: #00bcd3; --accent-hover-dark: #00a9be;
  --accent-container-dark: #00383f; --on-accent-container-dark: #8ce1eb;
  --on-accent: #00464e;
}
:root[data-accent="teal"] {
  --accent-light: #019587; --accent-hover-light: #018377;
  --accent-container-light: #e1f2f1; --on-accent-container-light: #003933;
  --accent-dark: #019587; --accent-hover-dark: #1fa295;
  --accent-container-dark: #002d29; --on-accent-container-dark: #8dcfc9;
  --on-accent: #00211e;
}
:root[data-accent="green"] {
  --accent-light: #4bae4f; --accent-hover-light: #429946;
  --accent-container-light: #e9f5ea; --on-accent-container-light: #1c421e;
  --accent-dark: #4bae4f; --accent-hover-dark: #61b864;
  --accent-container-dark: #173418; --on-accent-container-dark: #aedbb0;
  --on-accent: #173618;
}
:root[data-accent="light_green"] {
  --accent-light: #8ac248; --accent-hover-light: #79ab3f;
  --accent-container-light: #f1f8e9; --on-accent-container-light: #344a1b;
  --accent-dark: #8ac248; --accent-hover-dark: #7caf41;
  --accent-container-dark: #293a16; --on-accent-container-dark: #cae4ad;
  --on-accent: #33481b;
}
:root[data-accent="lime"] {
  --accent-light: #cbdc38; --accent-hover-light: #b3c231;
  --accent-container-light: #f9fbe7; --on-accent-container-light: #4d5415;
  --accent-dark: #cbdc38; --accent-hover-dark: #b7c632;
  --accent-container-dark: #3d4211; --on-accent-container-dark: #e8efa5;
  --on-accent: #575f18;
}
:root[data-accent="yellow"] {
  --accent-light: #ffea3a; --accent-hover-light: #e0ce33;
  --accent-container-light: #fffce7; --on-accent-container-light: #615916;
  --accent-dark: #ffea3a; --accent-hover-dark: #e6d334;
  --accent-container-dark: #4d4611; --on-accent-container-dark: #fff6a6;
  --on-accent: #6e6519;
}
:root[data-accent="amber"] {
  --accent-light: #ffc006; --accent-hover-light: #e0a905;
  --accent-container-light: #fff7e1; --on-accent-container-light: #614902;
  --accent-dark: #ffc006; --accent-hover-dark: #e6ad05;
  --accent-container-dark: #4d3a02; --on-accent-container-dark: #ffe38f;
  --on-accent: #664d02;
}
:root[data-accent="orange"] {
  --accent-light: #fe9700; --accent-hover-light: #e08500;
  --accent-container-light: #fff3e0; --on-accent-container-light: #613900;
  --accent-dark: #fe9700; --accent-hover-dark: #e58800;
  --accent-container-dark: #4c2d00; --on-accent-container-dark: #ffd08c;
  --on-accent: #5e3800;
}
:root[data-accent="deep_orange"] {
  --accent-light: #ff5721; --accent-hover-light: #e04d1d;
  --accent-container-light: #ffebe4; --on-accent-container-light: #61210d;
  --accent-dark: #ff5721; --accent-hover-dark: #ff6b3c;
  --accent-container-dark: #4d1a0a; --on-accent-container-dark: #ffb39b;
  --on-accent: #471809;
}
:root[data-accent="brown"] {
  --accent-light: #795649; --accent-hover-light: #6a4c40;
  --accent-container-light: #efebe9; --on-accent-container-light: #2e211c;
  --accent-dark: #9f857c; --accent-hover-dark: #aa948c;
  --accent-container-dark: #362721; --on-accent-container-dark: #c3b3ad;
  --on-accent: #ffffff;
}
:root[data-accent="grey"] {
  --accent-light: #9e9d9e; --accent-hover-light: #8b8a8b;
  --accent-container-light: #f3f3f3; --on-accent-container-light: #3c3c3c;
  --accent-dark: #9e9d9e; --accent-hover-dark: #aaa9aa;
  --accent-container-dark: #2f2f2f; --on-accent-container-dark: #d3d3d3;
  --on-accent: #363536;
}
:root[data-accent="blue_grey"] {
  --accent-light: #607c8b; --accent-hover-light: #546d7a;
  --accent-container-light: #eceff1; --on-accent-container-light: #242f35;
  --accent-dark: #607c8b; --accent-hover-dark: #738c99;
  --accent-container-dark: #1d252a; --on-accent-container-dark: #b7c4cb;
  --on-accent: #000000;
}

:root {
  /* No choice made yet: the brand yellow itself. It is NOT one of the 19
     palette entries - those are secondary colours - but it is what the
     logo, the widgets and the emails use, so an untouched install is
     brand-accurate rather than merely close to it. Derived and
     contrast-checked exactly like every palette entry. */
  --accent-light: #fbc711; --accent-hover-light: #ddaf0f;
  --accent-container-light: #fff8e2; --on-accent-container-light: #5f4c06;
  --accent-dark: #fbc711; --accent-hover-dark: #e2b30f;
  --accent-container-dark: #4b3c05; --on-accent-container-dark: #fde694;
  --on-accent: #645007;
}

/* --- light/dark resolution ------------------------------------------- */
/* Default (light), the OS preference, and an explicit manual choice all
   have to resolve the pair above - the attribute selectors deliberately
   out-rank the media query so a manual pick always wins. */
:root {
  --accent: var(--accent-light);
  --accent-hover: var(--accent-hover-light);
  --accent-container: var(--accent-container-light);
  --on-accent-container: var(--on-accent-container-light);
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: var(--accent-dark);
    --accent-hover: var(--accent-hover-dark);
    --accent-container: var(--accent-container-dark);
    --on-accent-container: var(--on-accent-container-dark);
  }
}
:root[data-theme="dark"] {
  --accent: var(--accent-dark);
  --accent-hover: var(--accent-hover-dark);
  --accent-container: var(--accent-container-dark);
  --on-accent-container: var(--on-accent-container-dark);
}
:root[data-theme="light"] {
  --accent: var(--accent-light);
  --accent-hover: var(--accent-hover-light);
  --accent-container: var(--accent-container-light);
  --on-accent-container: var(--on-accent-container-light);
}

/* --- the picker's own swatches ---------------------------------------- */
/* Literal colours, not var() references: every swatch has to show its own
   colour at once, so they can't read the single currently-active accent. */
.aw-swatch[data-accent-choice="red"] { background: #f34236; }
.aw-swatch[data-accent-choice="pink"] { background: #e8207e; }
.aw-swatch[data-accent-choice="purple"] { background: #9b26ae; }
.aw-swatch[data-accent-choice="deep_purple"] { background: #6639ab; }
.aw-swatch[data-accent-choice="indigo"] { background: #3d51b4; }
.aw-swatch[data-accent-choice="blue"] { background: #2295f1; }
.aw-swatch[data-accent-choice="light_blue"] { background: #03a8f3; }
.aw-swatch[data-accent-choice="cyan"] { background: #00bcd3; }
.aw-swatch[data-accent-choice="teal"] { background: #019587; }
.aw-swatch[data-accent-choice="green"] { background: #4bae4f; }
.aw-swatch[data-accent-choice="light_green"] { background: #8ac248; }
.aw-swatch[data-accent-choice="lime"] { background: #cbdc38; }
.aw-swatch[data-accent-choice="yellow"] { background: #ffea3a; }
.aw-swatch[data-accent-choice="amber"] { background: #ffc006; }
.aw-swatch[data-accent-choice="orange"] { background: #fe9700; }
.aw-swatch[data-accent-choice="deep_orange"] { background: #ff5721; }
.aw-swatch[data-accent-choice="brown"] { background: #795649; }
.aw-swatch[data-accent-choice="grey"] { background: #9e9d9e; }
.aw-swatch[data-accent-choice="blue_grey"] { background: #607c8b; }