/* artist.partners — design tokens: the type ladder, the atom, the palette
   Load order is tokens -> base -> layout -> components -> responsive;
   the media queries come last so they can override component rules.
   See README.md for the rules this system holds to.

   Editing this file moves the ?v= stamp, so run tools/stamp.py after. If the
   change then does not appear in production, read the note at the end of
   DEPLOY.md before assuming the deploy failed — a stamped URL can be served
   from a stale edge object. */

/* ============================================================
   artist.partners — design system prototype v3

   THE LAWS THIS FILE ENCODES
   · one type ladder — 12/14/16/22/34/56/96, nothing off it
   · the 96 step appears at most ONCE per page
   · one 16px atom is gutter, page-margin unit and vertical rhythm
   · three spacing tokens only — 16 / 64 / 160
   · red is the only accent, at most once per screen, at scale
   · rules and space. no boxes, no shadows, no tinted cards
   · the wordmark is SVG outlines, never live text
   · colour imagery = the client's world. monochrome = the
     engineering. never both in one frame.

   ONE PALETTE ADDITION, MADE ON REQUEST
   The 2024 swatch sheet has no white. White is now the ground and
   Bone #ECEBE7 is the hover highlight. Everything else is the
   sanctioned palette untouched.
   ============================================================ */

:root {
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-22: 22px;
  --t-34: 34px; --t-56: 56px; --t-96: 96px;

  --atom: 16px;
  --margin: calc(var(--atom) * 3);
  --cols: 12;

  --s-1: 16px; --s-2: 64px; --s-3: 160px;

  --measure: 34em;
  --lh-prose: 1.55;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --nav-h: 58px;

  --font-display: "Rhymes Display", Didot, "Bodoni 72", "Times New Roman", Georgia, serif;
  --font-sans: "PP Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

:root {
  color-scheme: light dark;  /* so the UA chrome and scrollbars follow the theme */

  --ground: #FFFFFF;
  --highlight: #ECEBE7;      /* Bone, the hover highlight */
  --ink: #000000;
  --muted: #5A5A5A;
  --accent: #DD3D37;
  --rule: rgba(0, 0, 0, 0.14);

  /* THE DEEP SECTION. One block on the page carries the reverse of the
     ground: on white it is black with light type. Every value that block
     needs is a -deep pair, so the whole reversal flips as one per scheme
     rather than a ground colour flipping without its ink. */
  --ground-deep: #000000;
  --ink-on-deep: #D0D0D0;
  --muted-deep: #8A8A8A;
  --highlight-deep: #141414; /* the hover plate inside the block */
  --rule-deep: rgba(255, 255, 255, 0.18);
  --logo-filter-deep: grayscale(1) invert(1);
  --logo-blend-deep: screen;

  /* LOGO TREATMENT. Every logo in assets/logos is dark artwork drawn for a
     white ground, and the PNGs carry an opaque white background (no alpha).
     On the white ground: grey it, then multiply so the white boxes vanish.
     On a dark ground: grey it, INVERT it — dark marks become light, white
     boxes become black — then screen so those black boxes vanish. Screen
     alone is what broke dark mode: it erased the dark marks and turned the
     PNG backgrounds into light grey boxes. */
  --logo-filter: grayscale(1);
  --logo-blend: multiply;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* The dark ground is the same black the films are letterboxed in, so the
       signal band and the capability films sit on the page with no seam at
       their edges — the animation reads as the page rather than a block laid
       on it. It was #0E0E0E, which showed as a visible join against #000. */
    --ground: #000000;
    --highlight: #1D1D1C;
    --ink: #D0D0D0;
    --muted: #8A8A8A;
    --accent: #E8564F;
    --rule: rgba(255, 255, 255, 0.16);
    --logo-filter: grayscale(1) invert(1);
    --logo-blend: screen;

    /* THE DEEP SECTION IN DARK MODE. The reversal flips with the scheme: on
       the dark ground the block is Bone with black type, and the logo
       treatment inside it flips back to the light-ground pair. Lifting the
       block a step to #1D1D1C instead was the first attempt and read as a
       fault rather than a device — two near-blacks a hair apart look like a
       colour that failed to load. */
    --ground-deep: #ECEBE7;
    --ink-on-deep: #000000;
    --muted-deep: #5A5A5A;
    --highlight-deep: #FFFFFF;
    --rule-deep: rgba(0, 0, 0, 0.14);
    --logo-filter-deep: grayscale(1);
    --logo-blend-deep: multiply;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --ground: #FFFFFF; --highlight: #ECEBE7; --ink: #000000;
  --muted: #5A5A5A; --accent: #DD3D37; --rule: rgba(0,0,0,.14);
  --logo-filter: grayscale(1); --logo-blend: multiply;
  --ground-deep: #000000; --ink-on-deep: #D0D0D0; --muted-deep: #8A8A8A;
  --highlight-deep: #141414; --rule-deep: rgba(255,255,255,.18);
  --logo-filter-deep: grayscale(1) invert(1); --logo-blend-deep: screen;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #000000; --highlight: #1D1D1C; --ink: #D0D0D0;
  --muted: #8A8A8A; --accent: #E8564F; --rule: rgba(255,255,255,.16);
  --logo-filter: grayscale(1) invert(1); --logo-blend: screen;
  --ground-deep: #ECEBE7; --ink-on-deep: #000000; --muted-deep: #5A5A5A;
  --highlight-deep: #FFFFFF; --rule-deep: rgba(0,0,0,.14);
  --logo-filter-deep: grayscale(1); --logo-blend-deep: multiply;
}