/* Chameleon UI · responsive + a11y base layer (brand-neutral) */
:root{
  color-scheme: light dark;
  /* fluid type scale — rem/clamp, never fixed px */
  --cui-fs-2xs:clamp(.68rem,.66rem + .1vw,.75rem);
  --cui-fs-xs: clamp(.75rem,.72rem + .15vw,.85rem);
  --cui-fs-sm: clamp(.85rem,.82rem + .2vw,.95rem);
  --cui-fs-base:clamp(.95rem,.9rem + .3vw,1.05rem);
  --cui-fs-lg: clamp(1.05rem,1rem + .5vw,1.25rem);
  --cui-fs-xl: clamp(1.2rem,1.05rem + .9vw,1.6rem);
  --cui-fs-2xl:clamp(1.5rem,1.2rem + 1.6vw,2.2rem);
  --cui-fs-3xl:clamp(1.9rem,1.4rem + 2.6vw,3.2rem);
  /* fluid spacing */
  --cui-sp-1:clamp(.25rem,.2rem + .2vw,.4rem);
  --cui-sp-2:clamp(.5rem,.4rem + .4vw,.75rem);
  --cui-sp-3:clamp(.75rem,.6rem + .6vw,1.1rem);
  --cui-sp-4:clamp(1rem,.8rem + 1vw,1.6rem);
  --cui-sp-6:clamp(1.5rem,1.1rem + 1.8vw,2.6rem);
  --cui-sp-8:clamp(2rem,1.4rem + 2.6vw,3.6rem);
  /* house breakpoints (px, for reference) */
  --cui-bp-sm:640px; --cui-bp-md:900px; --cui-bp-lg:1200px;
  --cui-radius:10px;
  /* brand hooks — neutral fallbacks; the tenant base.css overrides these */
  --cui-bg:#0b0f16; --cui-surface:#141c2b; --cui-text:#e9f0fa; --cui-muted:#8394ab;
  --cui-primary:#22d3ee; --cui-accent:#22c55e; --cui-line:#22344f;
  /* --cui-danger is a SOLVED token (not a literal) — the one colour that must stay legible + on-brand; the
     Chameleon solver contrast-solves it per tenant skin, like --cui-primary/--cui-accent. Default is a fallback.
     (Fix credited to the Lattice lane, 2026-08-19 — a hardcoded #ff6b6b defeated the design-system-as-data claim.) */
  --cui-danger:#ff6b6b;
  /* --cui-danger-text is the READABLE error-TEXT variant (the highest contrast risk — text a person must read,
     not decoration); solved per skin. #ff8a8a on white is ~2.3:1 and fails AA, so on a light tenant skin the
     solver picks a darker readable red. (2nd fix credited to the Lattice lane, 2026-08-19.) */
  --cui-danger-text:#ff8a8a;
  --cui-font-display:'Space Grotesk',system-ui,sans-serif;
  --cui-font-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --cui-font-mono:ui-monospace,'SF Mono',Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{font-family:var(--cui-font-body);font-size:var(--cui-fs-base);line-height:1.55;
  color:var(--cui-text);background:var(--cui-bg);min-height:100dvh;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--cui-font-display);line-height:1.15;text-wrap:balance}
h1{font-size:var(--cui-fs-3xl)} h2{font-size:var(--cui-fs-2xl)} h3{font-size:var(--cui-fs-xl)}
p,li{max-width:70ch;overflow-wrap:break-word}
a{color:var(--cui-primary)}
code,pre,kbd,samp{font-family:var(--cui-font-mono)}
pre{overflow-x:auto}
/* interactive: 44px targets, 16px inputs (no iOS zoom), visible focus */
button,[role=button],a.cui-btn,input,select,textarea{font:inherit}
button,[role=button],a.cui-btn{min-height:44px;min-width:44px;cursor:pointer}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:max(16px,1rem);min-height:44px}
:focus-visible{outline:2px solid var(--cui-primary);outline-offset:2px;border-radius:4px}
/* reflow primitives — stack on phones, expand on wider screens */
.cui-stack{display:flex;flex-direction:column;gap:var(--cui-sp-3)}
.cui-cluster{display:flex;flex-wrap:wrap;gap:var(--cui-sp-2);align-items:center}
.cui-grid{display:grid;gap:var(--cui-sp-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--cui-col,280px)),1fr))}
.cui-rail{display:flex;flex-direction:column;gap:var(--cui-sp-2)}
@media(min-width:900px){.cui-rail{flex-direction:row;align-items:flex-start}}
.cui-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cui-wrap{max-width:var(--cui-bp-lg);margin-inline:auto;
  padding-inline:var(--cui-sp-4);padding-block:var(--cui-sp-6)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}