/* ============================================================
   SKINSTATE BRAND STYLESHEET v1.1
   Single source of truth for the clinic-data dashboard.
   Derived from the brand identity template (Figma Slides,
   "Design Updates from DTC"). Full spec: SKINSTATE_DESIGN_GUIDELINES.md
   in the SKINSTATE folder root.

   HOW TO USE ON ANY NEW PAGE — add to <head>, AFTER your own <style>:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="skinstate_brand.css">
   Then use the tokens (var(--accent) etc.) and patterns below.
   ============================================================ */

/* ---- tokens ---- */
:root{
  --bg:#FAFBFE; --card:#FFFFFF; --ink:#10152B; --mut:#5A6377;
  --line:#DCE1EE; --accent:#013A94; --cobalt:#001856;
  --accsoft:#E7EDF9; --track:#EDF0F8; --orange:#FF6B35;
  --ssbg:#E7EDF9; --ssink:#001856; --warn:#A32D2D;
  --serif:'DM Serif Display',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#020A22; --card:#071336; --ink:#EDF1FA; --mut:#96A2C2;
  --line:#1B2C5C; --accent:#9FB6EA; --cobalt:#C2CFE8;
  --accsoft:#0D1E4C; --track:#0D1C48;
  --ssbg:#0D1E4C; --ssink:#C2CFE8; --warn:#E79A9A;
}}

/* ---- voice: eyebrow / headline / body ---- */
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.eyebrow .sep{color:var(--mut);margin:0 7px;letter-spacing:0}
.eyebrow .num{color:var(--orange)}
h1{font-family:var(--serif);font-weight:400;color:var(--cobalt);letter-spacing:0}
h2,.phead h2,.thesis h2{font-family:var(--serif);font-weight:400;color:var(--cobalt)}

/* ---- mono system voice: labels, data, footers ---- */
.ctl label,.ctrls .lbl,.sh,.sh b,.wk,.legend,.bp-h{font-family:var(--mono);letter-spacing:.09em}
.ctl label,.ctrls .lbl{font-size:10.5px;font-weight:500;text-transform:uppercase}
.sh{font-size:10.5px}.sh b{font-size:11.5px;font-weight:600}
.val,.bval,.srow .v,.pp,.brank,.cnt,.nsz,.chip .n{font-family:var(--mono)}
.badge{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;border-radius:3px;background:var(--cobalt)}
.pill,.btag,.kind{font-family:var(--mono);letter-spacing:.05em;border-radius:3px}
.explore{font-family:var(--mono);border-radius:3px}
.foot,.bm{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em}

/* ---- shape: sharp, flat, bordered ---- */
.card,.panel,.ctrls,.statsec,.curvebox,.bars,.hint,#map,.prof,.thesis,.layer,.angle{border-radius:4px}
.barwrap,.bar,.btrack,.bfill{border-radius:2px}
select{font-family:inherit;border-radius:4px}
.leaflet-container{font-family:'IBM Plex Sans',-apple-system,sans-serif}
.leaflet-popup-content-wrapper{border-radius:4px}

/* ---- orange pops (use sparingly: numbering, hover moments) ---- */
.card .ic{color:var(--orange);border-color:var(--orange)}
a.card:hover{border-color:var(--orange)}
a.card:hover .ic{color:var(--orange)}

/* ---- dark mode fixups ---- */
@media(prefers-color-scheme:dark){
.chip.on,.seg button.on,.pill,a.back:hover,.explore:hover,.bchip.on{color:#04102E}
.badge{color:#04102E;background:var(--accent)}
.alab{fill:#C2CFE8;stroke:#020A22}.acell{stroke:#020A22}
#map{background:#0A1636}
}
