/* Joe Asare Studio — brand token layer.
   Shells consume these variables; applyBrand() (brand.js) overrides them per client,
   so a client's palette / type / logo is a config change, not a rebuild. */
:root{
  --brand-bg:#0b0e12;
  --brand-surface:#11161c;
  --brand-ink:#f0eee9;
  --brand-muted:#9aa4ad;
  --brand-accent:#c9852f;
  --brand-accent-2:#3a6fae;
  --brand-line:rgba(255,255,255,.14);
  --brand-radius:14px;
  --font-display:'Newsreader',serif;
  --font-mono:'DM Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --logo-url:none;
}
.brand-bg{background:var(--brand-bg);color:var(--brand-ink)}
.brand-surface{background:var(--brand-surface)}
.brand-ink{color:var(--brand-ink)}
.brand-muted{color:var(--brand-muted)}
.brand-accent{color:var(--brand-accent)}
.brand-line{border-color:var(--brand-line)}
.brand-display{font-family:var(--font-display)}
.brand-mono{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.brand-logo{width:120px;height:40px;background:var(--logo-url) left center/contain no-repeat}

/* studio-focus-visible: visible keyboard focus (a11y baseline — do not remove).
   Pages that set outline:none on sliders/inputs must not leave keyboard users without
   an indicator; :focus-visible keeps the ring off for pointer users. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand-accent,#c9852f);
  outline-offset:3px;
}
input[type=range]:focus-visible,[role=button]:focus-visible{
  outline:2px solid var(--brand-accent,#c9852f);
  outline-offset:4px;
}