/* ══════════════════════════════════════════════════════════════════════
   MARBLELENS · UNIVERSE — the shared night.
   One token contract for every surface. Loaded on every page; carries the
   palette and the fixed sky canvas only, so it can never collide with the
   AI Content or Website Builder layouts.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* OBSIDIAN — the darkroom */
  --ob-0:#010507; --ob-1:#061014; --ob-2:#0C171C; --ob-3:#132026; --ob-4:#1B2A31;
  --ob-ink:#F4EFE4; --ob-ink2:#DCD5C6; --ob-muted:#A8A092; --ob-quiet:#8A8377;
  --ob-line:rgba(244,239,228,.12); --ob-line2:rgba(244,239,228,.06);
  /* PAPER — the print */
  --pa-hi:#F1ECE2; --pa:#ECE6DA; --pa-lo:#E2DACA; --pa-deep:#D8CFBC;
  --ink:#1F1F1C; --ink2:#34332E; --graphite:#625E56;
  --pa-line:rgba(31,31,28,.14); --pa-line2:rgba(31,31,28,.07);
  /* ACCENTS — raw (fills/rules) */
  --gold:#C9A257; --gold-hi:#E8C57E; --ochre:#DFA945; --brass:#9C7A42;
  --blue:#37556B; --clay:#A15F45;
  /* ACCENTS — ink (type only, AA on paper-deep) */
  --brass-ink:#6D562E; --ochre-ink:#77521E; --clay-ink:#804C37; --blue-ink:#37556B;
  /* TYPE FAMILIES. These live here, not only in design-system.css, because
     the home loads universe.css + universe-home.css and nothing else — so
     --sans was undefined there and body had no font-family at all. Every
     element without an explicit font (the header nav links among them) fell
     back to the browser default, which is why the home's nav rendered in
     Times while the products' rendered in Inter. */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* system */
  --r-sm:6px; --r:10px; --r-lg:16px; --r-pill:999px;
  --sh-pin:0 3px 8px -3px rgba(1,5,7,.55);
  --sh-mount:0 1px 0 rgba(255,255,255,.05) inset, 0 12px 28px -18px rgba(1,5,7,.62);
  --sh-lift:0 38px 78px -34px rgba(1,5,7,.74);
  --ease:cubic-bezier(.22,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-f:.18s; --dur:.34s; --dur-s:.62s;
  --gutter:clamp(20px,1.2rem + 3vw,64px);
  --maxw:1240px;
  --nav-h:64px;
  /* type scale — the eight steps, nothing else */
  --t-hero:clamp(2.5rem,1.2rem + 5.1vw,5.1rem);
  --t-h1:clamp(2.1rem,1.2rem + 4.2vw,4.2rem);
  --t-h2:clamp(1.7rem,1.15rem + 2.6vw,2.9rem);
  --t-h3:clamp(1.22rem,.98rem + 1.15vw,1.62rem);
  --t-lede:clamp(1.04rem,.95rem + .5vw,1.28rem);
  --t-body:clamp(1rem,.96rem + .2vw,1.08rem);
  --t-small:clamp(.86rem,.83rem + .16vw,.94rem);
  --t-label:clamp(.72rem,.7rem + .12vw,.79rem);
}
*{box-sizing:border-box}
[hidden]{display:none!important}

/* the night runs under the whole site, on one fixed canvas */
#skyCanvas{position:fixed;inset:0;width:100%;height:100%;display:block;
  z-index:0;pointer-events:none}
body>header,body>nav,body>main,body>footer,body>.ml-shell,
#nav,#drawer,main,footer,#babaDock{position:relative;z-index:1}
#nav{z-index:100} #drawer{z-index:99} #babaDock{z-index:90}

/* the night belongs to the root element, so nothing downstream can paint
   over it and every page inherits the same ground */
html{
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  background:#02070A;
  background-image:radial-gradient(140% 100% at 50% 0%,#0B1A20 0%,#061014 38%,#02070A 100%);
  background-attachment:fixed;
}
body{
  margin:0;color:var(--ob-ink2);
  font-family:var(--sans);      /* the base every surface inherits */
  background:transparent;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* product shells paint their own ground; let the one night through instead */
body.u-night,body.u-night .aic-shell,body.u-night .bw-shell{background:transparent!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #skyCanvas{opacity:.55}
}

/* ══════════════════════════════════════════════════════════════════════
   ONE SYSTEM WINS.

   Every product page loads BOTH token systems: this one and the older
   paper system in design-system.css. design-system.css is linked AFTER
   universe.css, so for twenty shared token names the paper values were
   winning — which is why the site read as three or four different
   products sharing a background rather than one site.

   Those twenty are: --ink --graphite --brass --ochre --blue --clay
   --gutter --dur --ease-out --sh-mount --sh-lift --sh-pin and the eight
   type steps. `--ink:#171715` on a night ground is the dark-on-dark
   heading on /orders/; the paper type scale and shadows are why a
   product heading never matched the home.

   Load order cannot fix it without reordering every page, so specificity
   does: `body.u-night` (0,1,1) outranks `:root` (0,1,0) for everything
   inside the body, whichever file was linked first. The paper names are
   kept and re-pointed rather than removed, so product CSS that reads
   --paper or --ink keeps working and simply resolves to the night.
   ══════════════════════════════════════════════════════════════════════ */
body.u-night{
  /* surfaces — paper names, night values */
  --paper:var(--ob-2); --paper-hi:var(--ob-3);
  --paper-lo:var(--ob-1); --paper-deep:var(--ob-0);

  /* type — light on dark, the contrast the old names promised inverted */
  --ink:var(--ob-ink); --ink-2:var(--ob-ink2);
  --graphite:var(--ob-muted); --graphite-2:var(--ob-quiet);
  --line:var(--ob-line); --line-2:var(--ob-line2);

  /* accents — one gold owns the site; the paper copper and mineral
     greens are re-pointed so no page can reintroduce a second accent */
  --brass:#9C7A42; --ochre:#DFA945; --blue:#37556B; --clay:#A15F45;
  --oxblood:#8A4A42; --olive:#6E7659; --red:#C4614C; --forest:#3A5B4C;
  --accent:var(--gold); --accent-ink:var(--gold-hi);
  --accent-wash:rgba(201,162,87,.14);

  /* the eight steps, the site's only type scale */
  --t-hero:clamp(2.5rem,1.2rem + 5.1vw,5.1rem);
  --t-h1:clamp(2.1rem,1.2rem + 4.2vw,4.2rem);
  --t-h2:clamp(1.7rem,1.15rem + 2.6vw,2.9rem);
  --t-h3:clamp(1.22rem,.98rem + 1.15vw,1.62rem);
  --t-lede:clamp(1.04rem,.95rem + .5vw,1.28rem);
  --t-body:clamp(1rem,.96rem + .2vw,1.08rem);
  --t-small:clamp(.86rem,.83rem + .16vw,.94rem);
  --t-label:clamp(.72rem,.7rem + .12vw,.79rem);

  /* depth and motion — one set, so a card lifts the same everywhere */
  --sh-mount:0 1px 0 rgba(255,255,255,.05) inset,0 12px 28px -18px rgba(1,5,7,.62);
  --sh-lift:0 38px 78px -34px rgba(1,5,7,.74);
  --sh-pin:0 3px 8px -3px rgba(1,5,7,.55);
  --gutter:clamp(20px,1.2rem + 3vw,64px);
  --dur:.34s; --ease-out:cubic-bezier(.16,1,.3,1);

  /* the paper fibre in base.css is mix-blend-mode:multiply — over the
     night it only muddies. Zero here rather than deleting the rule,
     which still belongs to the paper surfaces in v3. */
  --grain-opacity:0;

  color-scheme:dark;
}