/* Appearance for every screen — dashboard, toolkit, studio, logo maker, image cleanup, sign-in.
 *
 * Each page keeps its own :root as the dark default, so a page still renders correctly on its
 * own. This file overrides the same token names per theme and per accent, which is why the
 * whole app changes together rather than page by page.
 *
 * Applied by theme.js before first paint. Attributes live on <html>:
 *   data-theme  = dark | light | contrast
 *   data-accent = blue | orange | green | violet | red | slate
 *
 * Adding a theme means covering every token in the union below. A missing one falls through to
 * the page's dark default and produces dark text on a light panel, so cover all of them.
 */

/* --gold is the brand fill and is the same in every theme — a logo colour is not a token to
   re-tint. --gold-ink is gold as text, which does need a readable step per ground. Conflating
   the two turned the avatar into dark-on-dark at 3.1:1. */

/* ---------------- LIGHT ---------------- */
html[data-theme="light"]{
  --bg:#F4F1E8; --bg2:#FFFFFF; --panel:#FFFFFF; --panel2:#F8F6EF;
  --ink:#0E1410; --ink2:#3D4A42; --mute:#5E6B63;
  --line:#DED9CB; --line2:#C6C0AE;
  --good:#1F7A66; --good-soft:#E6F5F1; --good-line:#9FD9CB; --good-ink:#145A4B;
  --warn:#7A5A0E; --warn-soft:#FBF4E2; --warn-line:#E8D08A;
  --bad:#A33F2B; --bad-soft:#FBECE8; --hot:#A33F2B; --hot-soft:#FBECE8; --hot-ink:#7A2E1F;
  --gold:#E9C46A; --gold2:#C9A44A; --gold-ink:#6E5410;
}
/* Inversions that do not follow from the tokens: surfaces authored as dark-on-dark. */
html[data-theme="light"] .mk-panel,
html[data-theme="light"] .dlg,
html[data-theme="light"] .prow,
html[data-theme="light"] .mrow{ color:var(--ink) }
html[data-theme="light"] .mk .art{ background-color:#fff }
html[data-theme="light"] .spin{ border-color:rgba(0,0,0,.18); border-top-color:var(--acc) }

/* ---------------- HIGH CONTRAST ----------------
   Black on white, heavier rules, no soft tints. For anyone who finds the other two hard to
   read — and it is the one to choose alongside a screen reader. */
html[data-theme="contrast"]{
  --bg:#FFFFFF; --bg2:#FFFFFF; --panel:#FFFFFF; --panel2:#F2F2F2;
  --ink:#000000; --ink2:#141414; --mute:#2E2E2E;
  --line:#000000; --line2:#000000;
  --good:#00631F; --good-soft:#FFFFFF; --good-line:#00631F; --good-ink:#004315;
  --warn:#6A4000; --warn-soft:#FFFFFF; --warn-line:#6A4000;
  --bad:#A80000; --bad-soft:#FFFFFF; --hot:#A80000; --hot-soft:#FFFFFF; --hot-ink:#7A0000;
  --gold:#E9C46A; --gold2:#C9A44A; --gold-ink:#6A5410;
}
html[data-theme="contrast"] *{ text-shadow:none !important; box-shadow:none !important }
html[data-theme="contrast"] .card,
html[data-theme="contrast"] .mapp,
html[data-theme="contrast"] .mrow,
html[data-theme="contrast"] .prow,
html[data-theme="contrast"] .mk,
html[data-theme="contrast"] .tile,
html[data-theme="contrast"] .folder{ border-width:2px }
html[data-theme="contrast"] a{ text-decoration:underline }
html[data-theme="contrast"] :focus-visible{ outline:3px solid #000; outline-offset:2px }

/* text that sits on a solid accent fill — white fails on orange at 3.3:1, so each accent
   carries the readable one rather than assuming white */
/* Platform badges — GoHighLevel, Vendasta, done-for-you. The hue identifies the platform, so it
   is kept in every theme; only the tint and border move, so a badge reads on its own ground. */
html[data-theme="dark"]{
  --ghl-ink:#5FD695; --ghl-soft:#0F2A1D; --ghl-line:#1E5B3C;
  --ven-ink:#7FB0FF; --ven-soft:#14243F; --ven-line:#27456F;
  --da-ink:#E9C46A;  --da-soft:#2A2416;  --da-line:#6A5839;
}
html[data-theme="light"]{
  --ghl-ink:#12683D; --ghl-soft:#EAF7EF; --ghl-line:#A7D9BC;
  --ven-ink:#1B4DB5; --ven-soft:#ECF2FE; --ven-line:#B7CDF5;
  --da-ink:#6E5410;  --da-soft:#FBF4E2;  --da-line:#E8D08A;
}
html[data-theme="contrast"]{
  --ghl-ink:#00541B; --ghl-soft:#FFFFFF; --ghl-line:#00541B;
  --ven-ink:#00308F; --ven-soft:#FFFFFF; --ven-line:#00308F;
  --da-ink:#5A4408;  --da-soft:#FFFFFF;  --da-line:#5A4408;
}

/* ---------------- ACCENTS ----------------
   One hue drives the primary action, links and selected states. Six; Gold (radar) is the casino
   skin's default.
     --acc      the fill
     --acc-ink  the same hue as text, stepped toward white (dark) or black (light) until it clears
                4.75:1 on the tint — a margin over 4.5 for engine rounding
     --acc-soft the tinted panel fill
     --acc-line its border
   Every value below was produced by scripts/restyle.mjs from the WCAG formula and is
   re-measured by check.mjs on every build. */
html[data-accent="tracer"]{ --acc:#8B5CF6 }
html[data-accent="radar"]{ --acc:#E9C46A }
html[data-accent="turq"]{ --acc:#4FC3B0 }
html[data-accent="clay"]{ --acc:#C1543C }
html[data-accent="deep"]{ --acc:#6D43CF }
html[data-accent="ash"]{ --acc:#8B7FA6 }

/* dark */
html[data-theme="dark"][data-accent="tracer"]{ --acc-ink:#986ef7; --acc2:#986ef7; --acc-dark:#986ef7; --acc-soft:#22163a; --acc-line:#432c74 }  /* 4.75:1 */
html[data-theme="dark"][data-accent="radar"]{ --acc-ink:#e9c46a; --acc2:#e9c46a; --acc-dark:#e9c46a; --acc-soft:#312723; --acc-line:#6a5839 }  /* 8.70:1 */
html[data-theme="dark"][data-accent="turq"]{ --acc-ink:#4fc3b0; --acc2:#4fc3b0; --acc-dark:#4fc3b0; --acc-soft:#18272f; --acc-line:#295757 }  /* 7.13:1 */
html[data-theme="dark"][data-accent="clay"]{ --acc-ink:#ca6e59; --acc2:#ca6e59; --acc-dark:#ca6e59; --acc-soft:#2b151c; --acc-line:#592926 }  /* 4.80:1 */
html[data-theme="dark"][data-accent="deep"]{ --acc-ink:#9272db; --acc2:#9272db; --acc-dark:#9272db; --acc-soft:#1d1234; --acc-line:#362164 }  /* 4.76:1 */
html[data-theme="dark"][data-accent="ash"]{ --acc-ink:#9084aa; --acc2:#9084aa; --acc-dark:#9084aa; --acc-soft:#221c2d; --acc-line:#433b52 }  /* 4.77:1 */

/* light */
html[data-theme="light"][data-accent="tracer"]{ --acc-ink:#6f4ac5; --acc2:#6f4ac5; --acc-dark:#6f4ac5; --acc-soft:#e9e1f7; --acc-line:#d2c1f7 }  /* 4.79:1 */
html[data-theme="light"][data-accent="radar"]{ --acc-ink:#796637; --acc2:#796637; --acc-dark:#796637; --acc-soft:#f2ece9; --acc-line:#f0e2ca }  /* 4.76:1 */
html[data-theme="light"][data-accent="turq"]{ --acc-ink:#2e7166; --acc2:#2e7166; --acc-dark:#2e7166; --acc-soft:#e3ecf0; --acc-line:#bfe2e0 }  /* 4.77:1 */
html[data-theme="light"][data-accent="clay"]{ --acc-ink:#a04632; --acc2:#a04632; --acc-dark:#a04632; --acc-soft:#eee0e4; --acc-line:#e3bebb }  /* 4.81:1 */
html[data-theme="light"][data-accent="deep"]{ --acc-ink:#6d43cf; --acc2:#6d43cf; --acc-dark:#6d43cf; --acc-soft:#e6dff3; --acc-line:#c8b9ea }  /* 4.83:1 */
html[data-theme="light"][data-accent="ash"]{ --acc-ink:#685f7d; --acc2:#685f7d; --acc-dark:#685f7d; --acc-soft:#e9e5ef; --acc-line:#d2ccdd }  /* 4.80:1 */

/* contrast */
html[data-theme="contrast"][data-accent="tracer"]{ --acc-ink:#8156e5; --acc2:#8156e5; --acc-dark:#8156e5; --acc-soft:#ffffff; --acc-line:#8B5CF6 }  /* 4.78:1 */
html[data-theme="contrast"][data-accent="radar"]{ --acc-ink:#85703c; --acc2:#85703c; --acc-dark:#85703c; --acc-soft:#ffffff; --acc-line:#E9C46A }  /* 4.79:1 */
html[data-theme="contrast"][data-accent="turq"]{ --acc-ink:#337f72; --acc2:#337f72; --acc-dark:#337f72; --acc-soft:#ffffff; --acc-line:#4FC3B0 }  /* 4.75:1 */
html[data-theme="contrast"][data-accent="clay"]{ --acc-ink:#bb513a; --acc2:#bb513a; --acc-dark:#bb513a; --acc-soft:#ffffff; --acc-line:#C1543C }  /* 4.83:1 */
html[data-theme="contrast"][data-accent="deep"]{ --acc-ink:#6d43cf; --acc2:#6d43cf; --acc-dark:#6d43cf; --acc-soft:#ffffff; --acc-line:#6D43CF }  /* 6.26:1 */
html[data-theme="contrast"][data-accent="ash"]{ --acc-ink:#786d8f; --acc2:#786d8f; --acc-dark:#786d8f; --acc-soft:#ffffff; --acc-line:#8B7FA6 }  /* 4.79:1 */


/* The label that sits on a solid accent fill. Ink where white would fall short of 4.5:1 —
   which it does on tracer (4.2:1), radar and turquoise — as the design system prescribes. */
html[data-accent="tracer"]{ --on-acc:#0E0916 }  /* 4.64:1 */
html[data-accent="radar"]{ --on-acc:#0E0916 }  /* 11.75:1 */
html[data-accent="turq"]{ --on-acc:#0E0916 }  /* 9.13:1 */
html[data-accent="clay"]{ --on-acc:#ffffff }  /* 4.56:1 */
html[data-accent="deep"]{ --on-acc:#ffffff }  /* 6.26:1 */
html[data-accent="ash"]{ --on-acc:#0E0916 }  /* 5.32:1 */

/* ---------------- THE PICKER ---------------- */
.appearance{ display:flex; flex-direction:column; gap:12px }
.appearance .row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.appearance .row > b{ min-width:74px; font-size:13px; color:var(--ink2) }
.appearance button{
  border:1px solid var(--line2); background:var(--panel2); color:var(--ink2);
  border-radius:0; padding:9px 15px; font:700 12px/1 var(--mono, inherit); letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px }
.appearance button:hover{ border-color:var(--acc) }
.appearance button[aria-pressed="true"]{ background:var(--acc); border-color:var(--acc); color:var(--on-acc,#fff) }
.appearance .sw{ width:30px; height:30px; border-radius:50%; padding:0; border:2px solid transparent }
.appearance .sw[aria-pressed="true"]{ border-color:var(--ink) }
.appearance .chip{ width:26px; height:16px; border-radius:0; border:1px solid rgba(0,0,0,.25); display:inline-block }
.appearance small{ color:var(--mute); font-size:12.5px; line-height:1.45 }
@media(pointer:coarse){
  .appearance button{ min-height:44px }
  .appearance .sw{ width:44px; height:44px }
}


/* ---------------- BRAND GEOMETRY ----------------
   The two rules the whole system hangs on: the primary action carries the notch, and every
   focus ring is radar gold at 3px offset — gold clears 3:1 on ink, bunker and bunker-2 alike. */
.btn.primary, button.primary, .btn-p, .btn-primary{ clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); border-radius:0 }
.btn.primary:focus-visible, button.primary:focus-visible, .btn-p:focus-visible, .btn-primary:focus-visible{ box-shadow:inset 0 0 0 2px var(--gold); outline:none }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }
html[data-theme="contrast"] :focus-visible{ outline:3px solid #000; outline-offset:2px }
h1, h2, h3, .display{ font-family:var(--display); text-transform:uppercase; letter-spacing:-.01em }
code, kbd, pre, .mono, .eyebrow, .tag, .kicker{ font-family:var(--mono) }

/* ---------------- TABLE FELT ----------------
   A real casino table green, lighter than the Night felt (the dark theme). Every text colour below clears
   4.5:1 on all four grounds (bg, bg2, panel, panel2); the accent text clears it on its own tint. */
html[data-theme="felt"]{
  --bg:#145A3A; --bg2:#114F33; --panel:#176340; --panel2:#1B6C45;
  --ink:#FBF7EA; --ink2:#E9F3EC; --mute:#D8EADF;
  --line:#2F8460; --line2:#45A077;
  --good:#A6EFC2; --good-ink:#BDF5D2; --good-soft:#0F4A32; --good-line:#3FA170;
  --warn:#F5D983; --warn-soft:#3F4A24; --warn-line:#8A8A45;
  --bad:#FFB3A8; --bad-soft:#4A2A22; --hot:#FFB3A8; --hot-soft:#4A2A22; --hot-ink:#FFCFC7;
  --gold:#E9C46A; --gold2:#FFE699; --gold-ink:#F5D983;
  --ghl-ink:#A6EFC2; --ghl-soft:#0F4A32; --ghl-line:#3FA170;
  --ven-ink:#B5D0FF; --ven-soft:#173A63; --ven-line:#3D6AA8;
  --da-ink:#F5D983;  --da-soft:#3F3A1E;  --da-line:#8A7A45;
}
html[data-theme="felt"][data-accent="tracer"]{ --acc-ink:#c3a9ff; --acc2:#c3a9ff; --acc-dark:#c3a9ff; --acc-soft:#0f4a32; --acc-line:#7456c8 }  /* 5.10:1 */
html[data-theme="felt"][data-accent="radar"]{ --acc-ink:#f5d983; --acc2:#f5d983; --acc-dark:#f5d983; --acc-soft:#0f4a32; --acc-line:#8a7a45 }  /* 7.40:1 */
html[data-theme="felt"][data-accent="turq"]{ --acc-ink:#6fe0cc; --acc2:#6fe0cc; --acc-dark:#6fe0cc; --acc-soft:#0f4a32; --acc-line:#2f8a7a }  /* 6.46:1 */
html[data-theme="felt"][data-accent="clay"]{ --acc-ink:#f4aa96; --acc2:#f4aa96; --acc-dark:#f4aa96; --acc-soft:#0f4a32; --acc-line:#a85a47 }  /* 5.39:1 */
html[data-theme="felt"][data-accent="deep"]{ --acc-ink:#c7b2fa; --acc2:#c7b2fa; --acc-dark:#c7b2fa; --acc-soft:#0f4a32; --acc-line:#6e52b8 }  /* 5.46:1 */
html[data-theme="felt"][data-accent="ash"]{ --acc-ink:#cdc3de; --acc2:#cdc3de; --acc-dark:#cdc3de; --acc-soft:#0f4a32; --acc-line:#7d7391 }  /* 6.09:1 */

/* ---------------- BRIGHT FELT ----------------
   The lightest of the three greens. Every text colour clears 4.5:1 on all four grounds, and the accent text on its own tint. */
html[data-theme="bright"]{
  --bg:#1F7A4D; --bg2:#1A6B43; --panel:#1C7149; --panel2:#207A50;
  --ink:#FFFFFF; --ink2:#F2FAF5; --mute:#E4F4EA;
  --line:#3FA170; --line2:#5CBA8B;
  --good:#D3F9E2; --good-ink:#E1FBEA; --good-soft:#0F4A32; --good-line:#5CBA8B;
  --warn:#FFF0C2; --warn-soft:#3F4A24; --warn-line:#A0A055;
  --bad:#FFEEEA; --bad-soft:#5A2A22; --hot:#FFEEEA; --hot-soft:#5A2A22; --hot-ink:#FFEEEA;
  --gold:#FFE08A; --gold2:#FFF0C2; --gold-ink:#FFF0C2;
  --ghl-ink:#D3F9E2; --ghl-soft:#0F4A32; --ghl-line:#5CBA8B;
  --ven-ink:#CFE0FF; --ven-soft:#173A63; --ven-line:#6D93CC;
  --da-ink:#FFF0C2;  --da-soft:#3F3A1E;  --da-line:#A08F55;
}
html[data-theme="bright"][data-accent="tracer"]{ --acc-ink:#c3a9ff; --acc2:#c3a9ff; --acc-dark:#c3a9ff; --acc-soft:#0f4a32; --acc-line:#7456c8 }  /* 5.10:1 */
html[data-theme="bright"][data-accent="radar"]{ --acc-ink:#ffe9a8; --acc2:#ffe9a8; --acc-dark:#ffe9a8; --acc-soft:#0f4a32; --acc-line:#a0a055 }  /* 8.54:1 */
html[data-theme="bright"][data-accent="turq"]{ --acc-ink:#6fe0cc; --acc2:#6fe0cc; --acc-dark:#6fe0cc; --acc-soft:#0f4a32; --acc-line:#2f8a7a }  /* 6.46:1 */
html[data-theme="bright"][data-accent="clay"]{ --acc-ink:#f4aa96; --acc2:#f4aa96; --acc-dark:#f4aa96; --acc-soft:#0f4a32; --acc-line:#a85a47 }  /* 5.39:1 */
html[data-theme="bright"][data-accent="deep"]{ --acc-ink:#c7b2fa; --acc2:#c7b2fa; --acc-dark:#c7b2fa; --acc-soft:#0f4a32; --acc-line:#6e52b8 }  /* 5.46:1 */
html[data-theme="bright"][data-accent="ash"]{ --acc-ink:#cdc3de; --acc2:#cdc3de; --acc-dark:#cdc3de; --acc-soft:#0f4a32; --acc-line:#7d7391 }  /* 6.09:1 */