/* ==========================================================================
   TOKENS — the whole visual system. Edit here first.
   One accent (marigold) on a light page; .act-dark flips a section dark.
   ========================================================================== */
:root {
  /* Colour */
  --bg: #ffffff;
  --bg-2: #f4f4f2;
  --ink: #121214;
  --ink-2: #3b3b41;
  --muted: #63636b;
  --dim: #d3d3d8;
  --line: #e6e6e9;
  --chip: #eeeef0;
  --hi: #ffc53d;            /* marigold: the one accent */
  --hi-ink: #121214;

  /* Type */
  --f-sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-h2: clamp(2.4rem, 5.6vw, 5.4rem);
  --t-lead: clamp(1.2rem, 1.7vw, 1.5rem);
  --t-body: 1.0625rem;
  --t-small: .875rem;
  --t-label: .75rem;

  /* Space & shape */
  --wrap: 1240px;
  --gutter: 24px;
  --section: clamp(120px, 20vh, 220px);
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

/* Dark section (the contact band) */
.act-dark {
  --bg: #0c0c0e;
  --bg-2: #161619;
  --ink: #f4f4f6;
  --ink-2: #d4d4da;
  --muted: #9d9da7;
  --dim: #34343a;
  --line: #26262b;
  --chip: #1f1f23;
  color-scheme: dark;
}