/*
 * Direction u: the tokens. One source of truth, copied unchanged by every
 * site. Light and dark through light-dark(); the platform's theme script sets
 * color-scheme on <html>. Colours are rgb() from the hex in the brief.
 */
:root {
  color-scheme: light dark;

  /* Paper and ink */
  --ground: light-dark(rgb(236 238 234), rgb(21 26 37));
  --sheet: light-dark(rgb(247 248 245), rgb(30 36 49));
  --sheet-raised: light-dark(rgb(252 252 250), rgb(37 44 59));
  --sheet-shade: light-dark(rgb(226 229 224), rgb(26 31 43));
  --ink: light-dark(rgb(35 38 44), rgb(236 237 232));
  --ink-2: light-dark(rgb(75 80 89), rgb(179 184 194));
  --crease: light-dark(rgb(163 168 159), rgb(95 104 120));
  --hairline: light-dark(rgb(209 213 205), rgb(52 60 77));
  --fibre: light-dark(rgb(150 156 146 / .55), rgb(140 150 175 / .28));
  --shadow-ink: light-dark(rgb(40 44 38 / .16), rgb(0 0 0 / .45));
  --shadow-ink-soft: light-dark(rgb(40 44 38 / .08), rgb(0 0 0 / .3));
  --on-band-light: rgb(247 248 245);
  --on-band-dark: rgb(21 26 37);
  --band-text: light-dark(var(--on-band-light), var(--on-band-dark));

  /* Her orange: the seal only */
  --seal: rgb(237 128 43);
  --seal-deep: rgb(214 108 26);
  --seal-label: light-dark(rgb(35 38 44), rgb(21 26 37));

  /* The nine area inks (type-safe on sheet and ground in both themes) */
  --ink-organise: light-dark(rgb(42 61 110), rgb(169 185 230));
  --ink-simplify: light-dark(rgb(30 91 103), rgb(140 202 213));
  --ink-juggle: light-dark(rgb(74 95 30), rgb(188 211 138));
  --ink-declutter: light-dark(rgb(108 72 38), rgb(216 180 142));
  --ink-stage: light-dark(rgb(61 84 104), rgb(169 190 210));
  --ink-style: light-dark(rgb(43 94 83), rgb(147 205 190));
  --ink-celebrate: light-dark(rgb(139 45 82), rgb(231 163 190));
  --ink-design: light-dark(rgb(122 87 16), rgb(227 194 122));
  --ink-share: light-dark(rgb(87 63 126), rgb(198 177 234));
  --ink-hub: var(--ink);

  /* Tints: a site's first frame and the hand-over layer */
  --tint-organise: light-dark(rgb(221 227 238), rgb(38 48 74));
  --tint-style: light-dark(rgb(216 230 225), rgb(31 53 48));
  --tint-celebrate: light-dark(rgb(240 222 229), rgb(58 34 48));
  --tint-simplify: light-dark(rgb(214 230 233), rgb(27 49 56));
  --tint-juggle: light-dark(rgb(226 232 211), rgb(40 50 28));
  --tint-declutter: light-dark(rgb(236 226 214), rgb(52 40 30));
  --tint-stage: light-dark(rgb(219 226 233), rgb(34 44 56));
  --tint-design: light-dark(rgb(238 229 205), rgb(52 44 24));
  --tint-share: light-dark(rgb(229 223 239), rgb(44 36 60));
  --tint-hub: var(--ground);

  /* The area in play: set by .area-<name> on any element */
  --area: var(--ink);
  --area-tint: var(--ground);

  /* Type */
  --face-sans: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --face-display: Besley, Rockwell, "Roboto Slab", Georgia, serif;
  --face-style: "Hedvig Letters Serif", Charter, "Iowan Old Style", Georgia, serif;
  --face-celebrate: Cormorant, "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --area-face: var(--face-display);
  --area-face-style: normal;
  --area-face-weight: 760;

  --text-xs: .75rem;      /* 12 px: the floor */
  --text-s: .8125rem;     /* 13 px */
  --text-m: .9375rem;     /* 15 px */
  --text-body: 1.0625rem; /* 17 px */
  --text-l: 1.25rem;
  --text-xl: clamp(1.5rem, 1.1rem + 1.3vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  --text-hero: clamp(2.375rem, 1.1rem + 4.2vw, 5.25rem);
  --track-caps: .14em;
  --measure: 68ch;

  /* Space */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --gutter: clamp(1rem, .6rem + 1.6vw, 2.5rem);
  --sheet-max: 97.5rem;   /* 1560 px */
  --radius-paper: 3px;
  --radius-tag: 6px;

  /* Motion */
  --ease-paper: cubic-bezier(.22, .8, .24, 1);
  --ease-press: cubic-bezier(.3, 0, .6, 1);
  --ease-out-quick: cubic-bezier(.2, .7, .2, 1);
  --t-press: 90ms;
  --t-lift: 180ms;
  --t-slip: 240ms;
  --t-fold: 420ms;
  --t-leaf: 680ms;
  --t-grow: 460ms;
  --t-fade: 150ms;

  /* The dock */
  --dock-h: 0px;
}

/* An element takes on an area: its ink, tint, face and pattern. */
.area-hub { --area: var(--ink-hub); --area-tint: var(--tint-hub); --pattern: url(/2026-10-10-round-2-h-fixes/_assets/previews/u/organise/system/patterns/seigaiha.6b50cdb26f.svg); }
.area-organise { --area: var(--ink-organise); --area-tint: var(--tint-organise); --pattern: url(/2026-10-10-round-2-h-fixes/_assets/previews/u/organise/system/patterns/seigaiha.6b50cdb26f.svg); --pattern-size: 24px 12px; }
.area-simplify { --area: var(--ink-simplify); --area-tint: var(--tint-simplify); --pattern: url(/2026-10-10-round-2-h-fixes/_assets/previews/u/organise/system/patterns/kikko.f825bc9ba0.svg); --pattern-size: 17.32px 30px; }
.area-juggle { --area: var(--ink-juggle); --area-tint: var(--tint-juggle); --pattern: url(/2026-10-10-round-2-h-fixes/_assets/previews/u/organise/system/patterns/ichimatsu.30bbc9daa5.svg); --pattern-size: 14px 14px; }
.area-declutter { --area: var(--ink-declutter); --area-tint: var(--tint-declutter); --pattern: url(/2026-10-10-round-2-h-fixes/_assets/previews/u/organise/system/patterns/yagasuri.d9787789fe.svg); --pattern-size: 20px 16px; }
.area-stage { --area: var(--ink-stage); --area-tint: var(--tint-stage); --pattern: url(/2026-10-10-round-2-h-fixes/_assets/previews/u/organise/system/patterns/higaki.dcf0934dfa.svg); --pattern-size: 16px 16px; }
.area-style { --area: var(--ink-style); --area-tint: var(--tint-style); --pattern: url(/2026-10-10-round-2-h-fixes/_assets/previews/u/organise/system/patterns/asanoha.f092e03481.svg); --pattern-size: 16px 27.71px; --area-face: var(--face-style); --area-face-weight: 400; }
.area-celebrate { --area: var(--ink-celebrate); --area-tint: var(--tint-celebrate); --pattern: url(/2026-10-10-round-2-h-fixes/_assets/previews/u/organise/system/patterns/shippo.5e84fb22df.svg); --pattern-size: 20px 20px; --area-face: var(--face-celebrate); --area-face-style: italic; --area-face-weight: 600; }
.area-design { --area: var(--ink-design); --area-tint: var(--tint-design); --pattern: url(/2026-10-10-round-2-h-fixes/_assets/previews/u/organise/system/patterns/uroko.9d4a3603d3.svg); --pattern-size: 12px 20px; }
.area-share { --area: var(--ink-share); --area-tint: var(--tint-share); --pattern: url(/2026-10-10-round-2-h-fixes/_assets/previews/u/organise/system/patterns/tatewaku.b4557726bb.svg); --pattern-size: 16px 28px; }
.area-gifttrix { --area: var(--ink-celebrate); --area-tint: var(--tint-celebrate); --pattern: url(/2026-10-10-round-2-h-fixes/_assets/previews/u/organise/system/patterns/shippo.5e84fb22df.svg); --pattern-size: 20px 20px; }
.area-apps { --area: var(--ink); --area-tint: var(--ground); --pattern: url(/2026-10-10-round-2-h-fixes/_assets/previews/u/organise/system/patterns/fibre.1fb44c51fc.svg); --pattern-size: 240px 240px; }