/* Appearance for every screen: dashboard, toolkit, studio, logo maker, image cleanup, sign-in.
 *
 * Each page keeps its own :root as the light default (look A), so a page still renders correctly
 * on its own. This file overrides the same token names per theme, per accent and per look, 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  = light | dark | contrast
 *   data-accent = turq | radar | clay | tracer | deep | ash
 *   data-look   = a | b | c      (absent means a): three design families, chosen by each practice
 *     a  Calm clinic: white and soft grey-green, Inter, rounded corners, plain sentences.
 *     b  Fresh and friendly: mint page, Plus Jakarta Sans, pill buttons, soft shadows, bold icon colour.
 *     c  Boutique premium: warm paper, serif headlines, navy action, brass touches, finer corners.
 *   A look decides the type (--display, --body), the corner (--r, --btn-r), the shadow and, in the light
 *   theme, the palette. The theme (light | dark | contrast) is a separate choice made on top of it.
 *   Setting document.documentElement.dataset.look = "a" | "b" | "c" restyles the whole app.
 *   The high contrast theme always wins over a look: it is an accessibility choice.
 *
 * Adding a theme means covering every token in the union below. A missing one falls through to
 * the page's light default and produces light text on a dark panel, so cover all of them.
 */

/* --gold is the brand fill (the teal of the mark). --gold-ink is that colour as text, which
   does need a readable step per ground. The names are kept from the first skin so every page
   keeps working; the values are teal. */

/* ---------------- LIGHT (look A) ---------------- */
html[data-theme="light"]{
  --bg:#F6FAFB; --bg2:#FFFFFF; --panel:#FFFFFF; --panel2:#EDF5F7;
  --ink:#132A31; --ink2:#32505B; --mute:#48626D;
  --line:#DCE8EC; --line2:#C3D5DB;
  --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:#0D9488; --gold2:#0B7C72; --gold-ink:#0B7C72;
}
/* 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) }

/* ---------------- DARK (any look) ---------------- */
html[data-theme="dark"]{
  --bg:#132A31; --bg2:#17323A; --panel:#1B3942; --panel2:#20404A;
  --ink:#F6FAFB; --ink2:#D3E2E7; --mute:#9FB7BF;
  --line:#24424B; --line2:#315862;
  --good:#5FD6A0; --good-soft:#12332F; --good-line:#1E5B4C; --good-ink:#8FE8C0;
  --warn:#F2B84B; --warn-soft:#2B2D22; --warn-line:#6A5A2A;
  --bad:#F08A7A; --bad-soft:#3A2323; --hot:#F08A7A; --hot-soft:#3A2323; --hot-ink:#F7B4A8;
  --gold:#14B8A6; --gold2:#5EEAD4; --gold-ink:#5EEAD4;
}

/* ---------------- 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:#0D9488; --gold2:#0B7C72; --gold-ink:#064F49;
}
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 }

/* Platform badges: Engage, Presence, 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"],
html[data-look="c"]:not([data-theme="contrast"]){
  --ghl-ink:#5FD695; --ghl-soft:#0F2A1D; --ghl-line:#1E5B3C;
  --ven-ink:#7FB0FF; --ven-soft:#14243F; --ven-line:#27456F;
  --da-ink:#5EEAD4;  --da-soft:#12333A;  --da-line:#1E5B57;
}
html[data-theme="light"]{
  --ghl-ink:#12683D; --ghl-soft:#EAF7EF; --ghl-line:#A7D9BC;
  --ven-ink:#1B4DB5; --ven-soft:#ECF2FE; --ven-line:#B7CDF5;
  --da-ink:#0B746C;  --da-soft:#E2EFEE;  --da-line:#AAD1CE;
}
html[data-theme="contrast"]{
  --ghl-ink:#00541B; --ghl-soft:#FFFFFF; --ghl-line:#00541B;
  --ven-ink:#00308F; --ven-soft:#FFFFFF; --ven-line:#00308F;
  --da-ink:#064F49;  --da-soft:#FFFFFF;  --da-line:#064F49;
}

/* ---------------- ACCENTS ----------------
   One hue drives the primary action, links and selected states. Six; Teal (turq) is the 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
   The ids are the ones the first skin used (radar is now Sky blue, turq Teal, clay Coral, ash
   Slate), so a saved choice still resolves. Every value below is re-measured by check.mjs on
   every build. */
html[data-accent="tracer"]{ --acc:#8B5CF6 }
html[data-accent="radar"]{ --acc:#0369A1 }
html[data-accent="turq"]{ --acc:#0B7C72 }
html[data-accent="clay"]{ --acc:#B3402A }
html[data-accent="deep"]{ --acc:#6D43CF }
html[data-accent="ash"]{ --acc:#4F6B78 }

/* dark */
html[data-theme="dark"][data-accent="tracer"]{ --acc-ink:#b99dfa; --acc2:#b99dfa; --acc-dark:#b99dfa; --acc-soft:#263d54; --acc-line:#534b9c }  /* 4.93:1 */
html[data-theme="dark"][data-accent="radar"]{ --acc-ink:#79b0cf; --acc2:#79b0cf; --acc-dark:#79b0cf; --acc-soft:#193e4c; --acc-line:#0f5172 }  /* 4.86:1 */
html[data-theme="dark"][data-accent="turq"]{ --acc-ink:#75b4af; --acc2:#75b4af; --acc-dark:#75b4af; --acc-soft:#194047; --acc-line:#135b5a }  /* 4.77:1 */
html[data-theme="dark"][data-accent="clay"]{ --acc-ink:#d4958b; --acc2:#d4958b; --acc-dark:#d4958b; --acc-soft:#2a3a40; --acc-line:#673d36 }  /* 4.77:1 */
html[data-theme="dark"][data-accent="deep"]{ --acc-ink:#b19ae6; --acc2:#b19ae6; --acc-dark:#b19ae6; --acc-soft:#233a50; --acc-line:#443e89 }  /* 4.82:1 */
html[data-theme="dark"][data-accent="ash"]{ --acc-ink:#9bacb2; --acc2:#9bacb2; --acc-dark:#9bacb2; --acc-soft:#203e47; --acc-line:#35525d }  /* 4.85:1 */

/* light */
html[data-theme="light"][data-accent="tracer"]{ --acc-ink:#734dcd; --acc2:#734dcd; --acc-dark:#734dcd; --acc-soft:#f1ebfe; --acc-line:#d6c6fc }  /* 4.92:1 */
html[data-theme="light"][data-accent="radar"]{ --acc-ink:#0369A1; --acc2:#0369A1; --acc-dark:#0369A1; --acc-soft:#e1edf4; --acc-line:#a7cbde }  /* 4.98:1 */
html[data-theme="light"][data-accent="turq"]{ --acc-ink:#0b746c; --acc2:#0b746c; --acc-dark:#0b746c; --acc-soft:#e2efee; --acc-line:#aad1ce }  /* 4.78:1 */
html[data-theme="light"][data-accent="clay"]{ --acc-ink:#B3402A; --acc2:#B3402A; --acc-dark:#B3402A; --acc-soft:#f6e8e5; --acc-line:#e4bcb4 }  /* 4.78:1 */
html[data-theme="light"][data-accent="deep"]{ --acc-ink:#6D43CF; --acc2:#6D43CF; --acc-dark:#6D43CF; --acc-soft:#ede8f9; --acc-line:#ccbdee }  /* 5.22:1 */
html[data-theme="light"][data-accent="ash"]{ --acc-ink:#4F6B78; --acc2:#4F6B78; --acc-dark:#4F6B78; --acc-soft:#eaedef; --acc-line:#c1cbd0 }  /* 4.82:1 */

/* contrast */
html[data-theme="contrast"][data-accent="tracer"]{ --acc-ink:#7f53e1; --acc2:#7f53e1; --acc-dark:#7f53e1; --acc-soft:#ffffff; --acc-line:#8B5CF6 }  /* 4.97:1 */
html[data-theme="contrast"][data-accent="radar"]{ --acc-ink:#0369A1; --acc2:#0369A1; --acc-dark:#0369A1; --acc-soft:#ffffff; --acc-line:#0369A1 }  /* 5.93:1 */
html[data-theme="contrast"][data-accent="turq"]{ --acc-ink:#0B7C72; --acc2:#0B7C72; --acc-dark:#0B7C72; --acc-soft:#ffffff; --acc-line:#0B7C72 }  /* 5.07:1 */
html[data-theme="contrast"][data-accent="clay"]{ --acc-ink:#B3402A; --acc2:#B3402A; --acc-dark:#B3402A; --acc-soft:#ffffff; --acc-line:#B3402A }  /* 5.70: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:#4F6B78; --acc2:#4F6B78; --acc-dark:#4F6B78; --acc-soft:#ffffff; --acc-line:#4F6B78 }  /* 5.67:1 */


/* The label that sits on a solid accent fill. Ink where white would fall short of 4.5:1
   (violet, 4.64:1 with the dark label), as the design system prescribes. */
html[data-accent="tracer"]{ --on-acc:#0E0916 }  /* 4.64:1 */
html[data-accent="radar"]{ --on-acc:#FFFFFF }  /* 5.93:1 */
html[data-accent="turq"]{ --on-acc:#FFFFFF }  /* 5.07:1 */
html[data-accent="clay"]{ --on-acc:#FFFFFF }  /* 5.70:1 */
html[data-accent="deep"]{ --on-acc:#FFFFFF }  /* 6.26:1 */
html[data-accent="ash"]{ --on-acc:#FFFFFF }  /* 5.67:1 */

/* ---------------- THE THREE LOOKS ----------------
   Type, corner and shadow for every look, in either theme; the light palette for looks B and C. Look A is the
   palette at the top of this file. These sit last, so they win ties with the accent rules. */
html{
  --r:14px; --btn-r:12px; --shadow:none;
  --display:"Inter","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"Inter","Helvetica Neue",Arial,sans-serif;
}
html[data-look="b"]{
  --r:18px; --btn-r:999px; --shadow:0 6px 16px rgba(13,100,95,.12);
  --display:"Plus Jakarta Sans","Inter","Helvetica Neue",Arial,sans-serif;
  --body:"Plus Jakarta Sans","Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"Plus Jakarta Sans","Inter","Helvetica Neue",Arial,sans-serif;
}
html[data-look="c"]{
  --r:6px; --btn-r:6px; --shadow:none;
  --display:"DM Serif Display",Georgia,"Times New Roman",serif;
}
html[data-theme="light"][data-look="b"]{
  --bg:#F1FAF8; --bg2:#FFFFFF; --panel:#FFFFFF; --panel2:#E6F6F3;
  --ink:#12343B; --ink2:#2E555C; --mute:#4D6F76;
  --line:#D2EAE5; --line2:#B5DAD3;
}
html[data-theme="light"][data-look="c"]{
  --bg:#FBF8F3; --bg2:#FFFFFF; --panel:#FFFFFF; --panel2:#F3EEE5;
  --ink:#1D2B33; --ink2:#3A4A52; --mute:#5E6A63;
  --line:#EAE3D6; --line2:#D6CCB8;
  --acc:#1D3A44; --on-acc:#FFFFFF; --acc-ink:#1D3A44; --acc2:#1D3A44; --acc-dark:#1D3A44; --acc-soft:#E9EEF0; --acc-line:#BCC9CE;
  --gold:#9A7B4F; --gold2:#7E6338; --gold-ink:#7E6338;
}
html[data-theme="light"][data-look="a"]{ --bg:#F7FAFA; --line:#E1ECEC; --line2:#C9DADA; --ink:#0F2E33; --mute:#4F676C }
/* soft depth where a look wants it */
html[data-look="a"] :is(.tile,.card,.kpi,.startc,.item,.frcard,.stat){ box-shadow:0 1px 2px rgba(15,46,51,.05) }
html[data-look="b"] :is(.tile,.folder,.card,.kpi,.item,.startc,.frcard,.stat,.drawer,.spot-in,.lesson,.socbox,.dlg){ box-shadow:var(--shadow); border-color:transparent }
html[data-look="b"] :is(.btn,.btn-p,.btn-primary,button.primary,button.ghost,.ghost,.chip,.pillsel,.badge){ border-radius:var(--btn-r) }
html[data-look="c"] :is(.btn,.btn-p,.btn-primary,button.primary,button.ghost,.ghost){ border-radius:var(--btn-r) }

/* ---------------- 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:var(--btn-r); padding:9px 15px; font:600 13px/1 var(--body, inherit); 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:4px; 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 }
}


/* ---------------- FOCUS AND HEADINGS ----------------
   Every focus ring is the brand teal at 3px offset; headings take the look's display face in sentence case. */
.btn.primary, button.primary, .btn-p, .btn-primary{ border-radius:var(--btn-r) }
.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:none; letter-spacing:-.01em; font-weight:600 }
html[data-look="c"] :is(h1,h2,h3,.display){ font-weight:400; letter-spacing:0 }
code, kbd, pre, .mono, .eyebrow, .tag, .kicker{ font-family:var(--mono) }