/* The Salon — design tokens.
 *
 * Sibling to art-factory's "lithophane", not a copy of it. That language is the WORKSHOP: an image
 * carved in translucent material, invisible until lit from behind. This is where the work is SHOWN
 * and SOLD, so its material is the other half of printmaking — the copper intaglio plate and the
 * impression pulled from it onto rag paper.
 *
 * Every colour is named for a thing in that world rather than for its role, because the names are
 * how the next person keeps the palette coherent: you can tell whether a new colour belongs by
 * asking whether it exists in a print studio.
 */

:root {
  /* ---- the plate ------------------------------------------------------------------------- */
  /* Copper seen dark. Warm, never blue-black — a neutral #111 would read as generic dark-mode
     and this is a specific metal. Everything hangs on this the way prints hang on a gallery wall. */
  --plate: #23201d;
  --plate-lift: #2c2825;   /* the same metal, one step up: rails, wells, hover ground */
  --tarnish: #6e5a48;      /* oxidised copper — borders, dividers, quiet structure */

  /* ---- the burr -------------------------------------------------------------------------- */
  /* A drypoint needle throws metal up beside the line; that burr catches ink and prints rich.
     It is DIRTY metallic gold, not luxury gold — #d4af37 would turn this into a jewellery site. */
  --burr: #c9a227;
  --burr-dim: #8f7420;

  /* ---- the paper ------------------------------------------------------------------------- */
  /* Cotton rag, slightly warm, slightly grey. Prints are matted on this and floated on the wall. */
  --rag: #e8e2d6;
  --rag-deep: #d6cfc0;     /* the shadowed side of a deckle edge, and the platemark's press */
  --wipe: #8e8b84;         /* plate tone: the film of ink left behind after wiping. Muted text. */
  --ink: #1a1714;          /* the ink itself — type ON paper */

  /* ---- the acid bath --------------------------------------------------------------------- */
  /* Verdigris. Reserved ENTIRELY for on-chain truth: minted, settled, live. Nothing decorative
     may use it, or it stops meaning anything. */
  --acid: #5c8f6e;
  --alarm: #a4533a;        /* iron oxide — refusals and destroyed work only */

  /* ---- type ------------------------------------------------------------------------------ */
  /* No webfonts: the CSP is default-src 'self' and this repo ships zero dependencies. Personality
     has to come from stacks and treatment.
     A didone is the actual vernacular of the auction catalogue — high contrast, vertical stress,
     hairline serifs. Set large and tight on the plate it reads as a catalogue cover, which is
     precisely what this is. Used ONLY for the wordmark and artist names. */
  --face-display: Didot, 'Bodoni 72', 'Bodoni MT', 'Playfair Display', Georgia, serif;
  /* Catalogue prose. A humanist oldstyle, because a lot description is read, not scanned. */
  --face-text: 'Iowan Old Style', Charter, 'Palatino Linotype', Palatino, Georgia, serif;
  /* Machine facts only — DIDs, mojos, edition fractions, skill ids. Same discipline as
     art-factory: human intent in the text face, machine truth in mono. This is the deliberate
     family resemblance between the two surfaces. */
  --face-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --step--1: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2.2rem, 1.6rem + 3vw, 4.2rem);
  --step-4: clamp(3rem, 1.8rem + 6vw, 7rem);

  /* ---- measure --------------------------------------------------------------------------- */
  --gutter: clamp(1.1rem, 0.6rem + 2vw, 2.75rem);
  --rule: 1px solid var(--tarnish);
  --hairline: 1px solid color-mix(in srgb, var(--tarnish) 45%, transparent);

  /* The press. A platemark is DEBOSSED — light catches the upper-left of the bevel and the
     lower-right falls into shadow. Two insets, opposite corners, is the whole trick. */
  --press: inset 1px 1px 0 rgba(255, 255, 255, 0.55), inset -1px -1px 0 rgba(0, 0, 0, 0.22);
  --press-deep: inset 2px 2px 3px rgba(0, 0, 0, 0.16), inset -1px -1px 0 rgba(255, 255, 255, 0.5);

  --hang: 0 18px 40px -22px rgba(0, 0, 0, 0.85);
}

/* The Salon is a dark room by design — prints are hung against dark walls because it is how they
   read best. There is no light theme, and pretending otherwise with a half-built one would be
   worse than committing. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--plate);
  color: var(--rag);
  font-family: var(--face-text);
  font-size: var(--step-0);
  line-height: 1.55;
  /* A copper plate is not perfectly flat. A single very soft radial keeps the ground from reading
     as flat #23201d, which is what makes a dark page feel like a screen rather than a room. */
  background-image: radial-gradient(120% 80% at 50% -10%, #2e2a26 0%, var(--plate) 55%);
  background-attachment: fixed;
}

:focus-visible {
  outline: 2px solid var(--burr);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}