/* Co-Agent site design tokens. One file, every page (home, account, live,
   iphone, privacy, terms, 404). The reasoning and the rules for using these
   live in docs/co-agent-site/DESIGN.md. Change a value here, not in a page.

   Theme: pages set <html data-theme="light|dark"> from a tiny inline script in
   <head> (stored choice, else the system setting) before first paint. The
   @media block below is only the no-JavaScript fallback. */

:root {
  color-scheme: light;
  /* surfaces and accents: the Co-Agent palette from Media Lab (kerpopule/
     vibexstudio media-lab/static/index.html, theme "coagent"; app/DESIGN.md
     lists the same values). Light is Media Lab's warm-paper take of the same
     hues. Brand accent is BLUE, secondary is VIOLET; no green or teal
     anywhere (2026-09-27, Steve). --cyan is the historical name of the brand
     accent; --teal/--teal2/--warm are kept only as aliases so older rules keep
     working, and they are blue/violet now. */
  --bg:#f7f6f2; --bg2:#efede6; --panel:#ffffff; --panel2:#fbfaf7; --inset:#efede6;
  --line:rgba(20,24,31,.1); --line-strong:rgba(20,24,31,.2);
  /* text */
  --ink:#14181f; --mut:#565a62;
  /* accents: tint #0a6fb2 (4.9:1 on --bg, 5.3:1 on --panel), violet #5a47d4 */
  --cyan:#0a6fb2; --teal:#0a6fb2; --violet:#5a47d4; --teal2:var(--violet); --warm:#5a47d4;
  --good:#0a6fb2; --bad:#c4342b; --amber:#8a5300;
  --focus:#0a6fb2; --on-accent:#ffffff;
  --glow1:rgba(10,111,178,.1); --glow2:rgba(90,71,212,.08); --glow3:rgba(217,131,36,.06);
  --shadow:0 20px 60px rgba(20,24,31,.12);
  /* Liquid Glass material (see DESIGN.md: glass) */
  --glass-tint:rgba(255,253,249,.62); --glass-hi:rgba(255,255,255,.75); --glass-lo:rgba(255,255,255,.2);
  --glass-rim:rgba(255,255,255,.9); --glass-edge:rgba(20,24,31,.1); --glass-solid:#ffffff;
  /* chrome/silver brand ramp: dark steel on light backgrounds */
  --chrome1:#39404e; --chrome2:#818a99; --chrome3:#12161d;
  /* the silver button is the same in both themes: dark ink on light metal */
  --silver:linear-gradient(150deg,#f4f7fb,#aab3c0 55%,#8b93a3); --silver-ink:#0a0c10;
  --silver-glow:rgba(170,179,192,.35); --silver-glow-hover:rgba(170,179,192,.5);

  /* type scale (rem, so browser text-size settings work). 10 steps. */
  --fs-2xs:.6875rem;  /* 11 badges, micro labels inside illustrations */
  --fs-xs:.75rem;     /* 12 fine print, chips */
  --fs-sm:.8125rem;   /* 13 captions, secondary UI */
  --fs-md:.875rem;    /* 14 buttons, nav, card body */
  --fs-base:1rem;     /* 16 body */
  --fs-lg:1.125rem;   /* 18 lead paragraphs */
  --fs-xl:1.25rem;    /* 20 card titles, logo */
  --fs-2xl:1.5rem;    /* 24 panel titles, h2 on text pages */
  --fs-3xl:2.5rem;    /* 40 icon glyphs */
  --fs-4xl:3rem;      /* 48 prices */
  --fs-h1:clamp(2.75rem,6.2vw,5.25rem);
  --fs-h2:clamp(1.875rem,4vw,3rem);
  --fs-h1-page:clamp(2.25rem,6vw,3.5rem);

  /* spacing: 4px grid */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-24:96px;

  /* radius */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px; --r:var(--r-lg);

  /* buttons: one geometry for every primary/secondary action */
  --btn-h:44px; --btn-px:20px; --btn-r:var(--r-md); --btn-fs:var(--fs-md); --btn-fw:700;
  --btn-h-lg:52px; --btn-px-lg:28px; --btn-fs-lg:var(--fs-base);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0b0806; --bg2:#150f0b; --panel:#150f0b; --panel2:#211913; --inset:#110c09;
  --line:rgba(255,255,255,.13); --line-strong:rgba(255,255,255,.24);
  --ink:#fafafa; --mut:#c2c0bf;
  --cyan:#5ec2ff; --teal:#5ec2ff; --violet:#a89bff; --teal2:var(--violet); --warm:#a89bff;
  --good:#5ec2ff; --bad:#ff6b63; --amber:#ffb454;
  --focus:#5ec2ff; --on-accent:#04121c;
  --glow1:rgba(94,194,255,.16); --glow2:rgba(139,124,255,.14); --glow3:rgba(255,180,84,.08);
  --shadow:0 24px 80px rgba(0,0,0,.6);
  --chrome1:#f4f7fb; --chrome2:#aab3c0; --chrome3:#e2e8f0;
  --glass-tint:rgba(12,9,7,.55); --glass-hi:rgba(255,255,255,.09); --glass-lo:rgba(255,255,255,.02);
  --glass-rim:rgba(255,255,255,.3); --glass-edge:rgba(255,255,255,.08); --glass-solid:#150f0b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:#0b0806; --bg2:#150f0b; --panel:#150f0b; --panel2:#211913; --inset:#110c09;
    --line:rgba(255,255,255,.13); --line-strong:rgba(255,255,255,.24);
    --ink:#fafafa; --mut:#c2c0bf;
    --cyan:#5ec2ff; --teal:#5ec2ff; --violet:#a89bff; --teal2:var(--violet); --warm:#a89bff;
    --good:#5ec2ff; --bad:#ff6b63; --amber:#ffb454;
    --focus:#5ec2ff; --on-accent:#04121c;
    --glow1:rgba(94,194,255,.16); --glow2:rgba(139,124,255,.14); --glow3:rgba(255,180,84,.08);
    --shadow:0 24px 80px rgba(0,0,0,.6);
    --chrome1:#f4f7fb; --chrome2:#aab3c0; --chrome3:#e2e8f0;
    --glass-tint:rgba(12,9,7,.55); --glass-hi:rgba(255,255,255,.09); --glass-lo:rgba(255,255,255,.02);
    --glass-rim:rgba(255,255,255,.3); --glass-edge:rgba(255,255,255,.08); --glass-solid:#150f0b;
  }
}

/* one visible keyboard focus ring everywhere (mouse clicks do not show it) */
:where(a, button, input, select, textarea, summary, model-viewer, [tabindex]):focus-visible {
  outline:3px solid var(--focus); outline-offset:3px;
}
/* model-viewer puts focus on an element inside its shadow root, so the host
   never matches :focus-visible. site.js sets html[data-kbd] while the visitor
   is using the keyboard; the ring shows then and not on mouse drags. */
model-viewer:focus-visible, html[data-kbd] model-viewer:focus-within { outline:3px solid var(--focus); outline-offset:3px; border-radius:var(--r-md); }

/* shared button geometry. Pages keep their own colours via their classes. */
.btn, .cta {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--btn-h); padding:0 var(--btn-px); border-radius:var(--btn-r);
  font:inherit; font-size:var(--btn-fs); font-weight:var(--btn-fw); line-height:1.2;
  text-decoration:none; text-align:center; cursor:pointer; max-width:100%; flex-wrap:wrap;
}
.btn.lg, .cta.lg { min-height:var(--btn-h-lg); padding:0 var(--btn-px-lg); font-size:var(--btn-fs-lg); }
.cta:disabled, .cta[aria-disabled="true"], .btn:disabled, .btn[aria-disabled="true"] {
  opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; filter:saturate(.4);
}

.visually-hidden { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }