/* ============================================================
   GROWMARK — tokens
   Two grounds, and the frame system that switches between them.

   Every section is a .frame carrying local --ground / --ink /
   --line / --muted. Components read those tokens and never the
   raw palette, so the same component renders correctly on either
   ground. Inverting anything is a two-token swap.
   ============================================================ */

:root{
  /* -- the two grounds -------------------------------------- */
  --paper:#FAFAF8;
  --carbon:#131312;

  /* -- per-ground supporting values -------------------------- */
  --muted-on-paper:#6E6B65;
  --muted-on-carbon:#9C9892;
  --line-on-paper:rgba(19,19,18,.14);
  --line-on-carbon:rgba(250,250,248,.18);
  --wash-on-paper:rgba(19,19,18,.035);
  --wash-on-carbon:rgba(250,250,248,.06);

  /* -- live tokens, redefined by each .frame ----------------- */
  --ground:var(--paper);
  --ink:var(--carbon);
  --muted:var(--muted-on-paper);
  --line:var(--line-on-paper);
  --wash:var(--wash-on-paper);
  --anti-ground:var(--carbon);
  --anti-ink:var(--paper);

  /* -- type -------------------------------------------------- */
  --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --inter:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:var(--inter);

  /* -- measure ----------------------------------------------- */
  --shell:1440px;
  --gutter:clamp(20px,5vw,72px);
  --bay:clamp(72px,9vw,112px);

  /* -- motion -------------------------------------------------
     One system, used everywhere. Two curves and three durations —
     if a rule needs a fourth value, the rule is wrong, not the
     scale. Both curves decelerate into rest and neither overshoots,
     which is what keeps the page calm under the hero, where the
     only overshoot on the site lives.

     --ease       everything that moves a short distance
     --ease-soft  long, slow decelerate — for things that RESIZE,
                  where a fast finish reads as a snap

     --dur-1  colour, opacity, borders — the eye barely tracks it
     --dur-2  transforms on small things: arrows, dots, chevrons
     --dur-3  layout: the nav pill collapsing, panels opening      */
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
  --dur-1:.18s;
  --dur-2:.26s;
  --dur-3:.36s;
}

/* ============================================================
   FRAME — the distribution switch
   ============================================================ */

.frame{
  background:var(--ground);
  color:var(--ink);
  position:relative;
}

.frame--paper{
  --ground:var(--paper);
  --ink:var(--carbon);
  --muted:var(--muted-on-paper);
  --line:var(--line-on-paper);
  --wash:var(--wash-on-paper);
  --anti-ground:var(--carbon);
  --anti-ink:var(--paper);
}

.frame--carbon{
  --ground:var(--carbon);
  --ink:var(--paper);
  --muted:var(--muted-on-carbon);
  --line:var(--line-on-carbon);
  --wash:var(--wash-on-carbon);
  --anti-ground:var(--paper);
  --anti-ink:var(--carbon);
}

/* An inverted island inside a frame — flips the tokens for its
   subtree so the same components render inverted.

   Values here are CONCRETE, never var(--anti-*). An island
   redefines its own --anti-* tokens, so a self-reference would
   resolve against the already-flipped value and cancel the flip. */
.invert{
  background:var(--ground);
  color:var(--ink);
}
.frame--paper .invert{
  --ground:var(--carbon);
  --ink:var(--paper);
  --muted:var(--muted-on-carbon);
  --line:var(--line-on-carbon);
  --wash:var(--wash-on-carbon);
  --anti-ground:var(--paper);
  --anti-ink:var(--carbon);
}
.frame--carbon .invert{
  --ground:var(--paper);
  --ink:var(--carbon);
  --muted:var(--muted-on-paper);
  --line:var(--line-on-paper);
  --wash:var(--wash-on-paper);
  --anti-ground:var(--carbon);
  --anti-ink:var(--paper);
}

/* ============================================================
   MEASURE
   ============================================================ */

.shell{
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.bay{padding-block:var(--bay)}

.seam{
  height:1px;
  background:var(--line);
  border:0;
  margin:0;
}