/* ==========================================================================
   Design tokens — single source of truth.
   Monochrome system: no hue is ever introduced. One sans family carries the
   whole page — there is no serif, and no monospace.
   ========================================================================== */

:root {
  /* --- Palette: cool-neutral greyscale, 6 steps -------------------------
     Near-black rather than pure black: the same register the companies on
     the bill sit in (#000d1f, #111827, #1d1d1f).                          */
  --c-ink: #0a0b0c;        /* near-black, faintly cool — primary text        */
  --c-graphite: #3a3d40;   /* secondary text                                 */
  --c-steel: #75797d;      /* tertiary text, meta, muted labels              */
  --c-rule: #d8d9da;       /* hairlines                                      */
  --c-mist: #eeefef;       /* subtle fills, hover surfaces                   */
  --c-paper: #fcfcfb;      /* page background                                */

  /* --- Semantic aliases -------------------------------------------------
     Components reference ONLY these. The ink zone remaps them to invert.  */
  --c-bg: var(--c-paper);
  --c-bg-raised: var(--c-mist);
  --c-fg: var(--c-ink);
  --c-fg-2: var(--c-graphite);
  --c-fg-3: var(--c-steel);
  --c-line: var(--c-rule);
  --c-line-strong: var(--c-ink);
  --c-focus: var(--c-ink);

  /* --- Typography -------------------------------------------------------
     A single humanist sans, in two weights only — 400 for text, 500 for
     titles. Size carries the hierarchy, not weight.

     Nothing is set in capitals. Letterspaced small caps are what made this
     read like a newspaper.                                                */
  --font-sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  /* Mixed case sets narrower than capitals, so the display can run larger. */
  --text-display: clamp(2.2rem, 10vw, 11rem);
  --text-roster: clamp(1.75rem, 4.5vw, 4.5rem);
  --text-h2: clamp(1.4rem, 2.9vw, 2.15rem);
  --text-h3: clamp(1.05rem, 1.7vw, 1.3rem);
  --text-lead: clamp(1.05rem, 1.7vw, 1.3rem);
  --text-lead-hero: clamp(1.35rem, 3vw, 2.2rem);
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-label: 0.875rem;

  --leading-tight: 1.02;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-loose: 1.65;

  --track-display: -0.03em;
  --track-title: -0.015em;

  /* --- Spacing scale ---------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.375rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 5.5rem;
  --space-5xl: 6rem;
  --space-6xl: 8rem;

  /* --- The grid ---------------------------------------------------------
     Twelve columns and a 16px gutter across the WHOLE viewport — there is
     still no page max-width. The page margin is not a spacing value: it is
     column 1 (and column 12), so content lives in the middle ten columns.
     At 1512 that resolves to the 127.3px the Figma rounds to 128, and at
     every other width it stays on the grid instead of stepping.

     Every horizontal measurement downstream is a column count:
       page margin  1 col + 1 gutter    aside        4 cols
       content     10 cols              empty        1 col
       time column  1 col               programme    5 cols                */
  --grid-cols: 12;
  --gutter: 16px;

  /* Floor for the time column. An orario is unbreakable, so that column cannot
     be a plain fraction of the grid: below this width the string spills into
     the entry beside it. The widest orario measures 102.3px, so this sits
     comfortably above it, and still under one page column at 1512 (111.3px)
     so the floor never binds at the Figma width and the row stays on grid. */
  --time-col: 6.75rem;

  /* Running text still gets a measure — the frame is wide, the line is not.
     34ch is what the four-column body resolves to at 1512, so it only
     starts binding on screens wider than the Figma.                       */
  --measure-prose: 58ch;
  --measure-title: 34ch;
  --measure-credit: 15rem;

  --rail-h: 3.25rem;
  --hairline: 1px;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 620ms;
}

/* Inverted zone: below the surface. Remapping the semantic aliases is the
   only change needed — every component follows automatically. This is the
   Ink mode of the Theme collection in the Figma. */
.zone-ink {
  --c-bg: var(--c-ink);
  --c-bg-raised: #17191b;
  --c-fg: var(--c-paper);
  --c-fg-2: #c3c6c8;
  --c-fg-3: #8b8f93;
  --c-line: #2c2f32;
  --c-line-strong: var(--c-paper);
  --c-focus: var(--c-paper);
}