/* nhilikeknee.com v2 design tokens.
   The single source of truth is DESIGN.md. A value that is not in that file
   either gets added there with a reason, or does not ship here. */

:root {
  /* Color. Light ground. Most of the color still enters through the
     photographs; the accent below is the one hue, and it is rationed. */
  --ground: #EBE5DC;      /* page background, warm sand */
  --paper: #E3DCD1;       /* second flat tone, for bands and empty slots */
  --card: #FFFFFF;        /* the empty node on the about page */
  /* The project card's stock and the marks written on it. All are read against the scrim rather than against the
     page, so they are picked for separation from a darkened ground rather than
     from the sand. In dark the stock has to climb well clear of a near-black
     scrim, and every mark on it climbs with it.

     The stock is `--paper` in light and a warm dark brown in dark. The work is
     printed straight onto it: a lighter plate behind a screenshot draws a
     rectangle around a rectangle. */
  --frame: #E3DCD1;       /* the card's stock */
  --frame-muted: #615B53; /* secondary text on the stock, 4.93:1 */
  /* The outlined button's edge. Not `--line`: a hairline meant to separate two
     large fields is 1.6:1, which is enough to divide a card from a page and not
     enough to say "this is a button". This one clears 3:1 against the stock in
     both themes, which is the floor for a control's own boundary, and it is
     nearly the same mid gray in both because it has to read against white and
     against a mid-dark ground.

     Darkened from `#8C857A` on 2026-09-17, because the sentence above was a
     claim and not a measurement: the old value was 2.68:1 on `--frame` and
     2.92:1 on `--ground`, so the Step button in Karmel's walkthrough, the one
     primary control in that figure, had an edge under the floor its own
     comment named. The new value is 3.25:1 on the stock, 3.54 on the ground,
     4.43 on white and 4.12 on the stepper's panel. Dark takes `#8A8379`
     below and was already clear at 3.35:1. */
  --frame-line: #7E776C;
  --ink: #1C1A17;         /* body */
  --ink-display: #4A3728; /* warm dark brown, for display headings on the sand ground */
  /* `--muted` in the display hue. It exists because the wordmark's tail is the
     same word as its head one shade back, so it has to be the head's brown
     quieted, not the page's caption gray. 4.54:1 on the ground, which clears
     the floor for normal text. */
  --muted-display: #7A6252;
  --muted: #6A645C;       /* captions, metadata */
  --line: #D6CEC1;        /* hairline borders */
  --line-soft: #E1D9CC;   /* quieter hairline */
  /* The keyline drawn inside a board tile. Not `--line`: that one separates
     two fields of the page and is used all over, and a tile's edge has a
     harder job. Two of the five tiles carry `--ground` out to their own edge
     now, so at `--line`'s 1.25:1 the boundary was there and was still being
     looked for. Third value: #CAC5BC at 1.37:1 could not be seen at all, and
     #A8A194 at 2.05:1 was still being hunted for. 3.65:1, which is an ordinary
     visible hairline rather than a suggestion of one, and still a third of
     what body text takes. Scoped to this one job so darkening it never reaches
     the hairlines elsewhere. */
  --keyline: #7C7566;
  /* The accent, in two steps, because one value cannot do both jobs. The hue
     is the site's own orange: `#E08700` was v1's color, which is the whole of
     the reason. It is rationed to three jobs and no others: inline links
     inside running prose, the one primary button on a page, and the current
     nav item. The tape was a fourth until 2026-09-14 and is now its own blue,
     because a strip of tape is a depicted material rather than a mark the site
     is making, and the accent should not be spent on it.

     `--accent` is a fill only, and it is `#E08700` muted: the same hue at 26
     degrees, desaturated and lightened until it sits with the sand and the
     warm brown ink rather than shouting over them. Revised 2026-09-14, because
     the pure value read as a traffic sign on a page of cream and brown. It is
     never set as text on a light ground. `--accent-ink` is the text step,
     5.31:1 on the sand. `--on-accent` clears 5.9:1 on the fill and 4.6:1 on
     the hover.

     In dark the fill doubles as the text step: it measures 6.99:1 on the dark
     ground, so the orange that is too light to read on cream is the one that
     reads on near-black, and nothing has to be invented for the theme. */
  --accent-ink: #A34A08;
  --accent: #D18F4E;
  /* Darker, not lighter: a control that recedes toward the ground under the
     pointer is saying the wrong thing. This is as far down as it can go and
     still clear 4.5:1 with `--on-accent` on it. */
  --accent-hover: #C27A35;
  /* Tape. Not the accent, and this is the one place a second hue is allowed:
     the strip is a depiction of a real material and the color is that
     material's, the way a photograph of a red door is allowed to be red. In
     `--accent` the strip read as a brand ribbon laid across the picture.

     It is paper painter's tape, so it is masking-tape yellow. Near the accent
     in hue and deliberately not near it in anything else: the strip is opaque
     paper with a crepe grain and torn ends, and the accent is a flat fill on a
     button. Two things that look like different objects are allowed to sit 20
     degrees apart on the wheel. Decoration only: `aria-hidden`, never text,
     never a border, never carrying a state. */
  --tape: #E2C878;
  /* Text on the accent fill. It does not flip with the theme, for the same
     reason `--on-scrim` does not: the fill is the same orange in both, so a
     token that inverted would put near-white on it at 2.4:1. Warm near-black
     on `#E08700` measures 5.8:1. Never white. */
  --on-accent: #26211C;
  --scrim: rgba(28, 26, 23, .58);                  /* behind the museum card */
  /* Anything drawn on the scrim. It does not flip with the theme, because the
     scrim is dark in both and a token that inverted would put a near-black
     mark on a near-black ground. */
  --on-scrim: rgba(255, 255, 255, .78);
  --on-scrim-strong: #FFFFFF;
  --on-scrim-wash: rgba(255, 255, 255, .14);
  /* A board tile at rest. A contact shadow, `0 1px 2px`, speaks for the foot
     of a card and says nothing about its left and right sides.
     Two of the five tiles carry `--ground` out to their own edge, so at rest
     those sides had the 1px keyline and nothing else, and the tile read as
     having no sides until the pointer arrived. The second layer carries a
     negative spread, so it reaches about 6px past the card rather than ringing
     it: enough for the eye to find the edge, short of the halo the design
     rules forbid. Quieter than `--shadow-lift`, so hovering is still a step
     up and not just a change of size. */
  --shadow-tile:
    0 1px 2px rgba(28, 26, 23, .07),
    0 4px 14px -8px rgba(28, 26, 23, .14);
  /* A hovered card floating above its neighbours. Same argument as the taped
     pair below: on warm sand anything readable as gray reads as paint, and
     `0 10px 28px` at .20 was a halo around every tile on the board. Contact
     plus ambient instead, nothing past .09, and the ambient carries a negative
     spread so the shadow escapes at the foot rather than ringing all four
     sides. The 4px lift is what the eye reads as height; the shadow only has
     to separate the card from the ground.

     The ambient alpha went from .09 to .16 on 2026-09-19, when `--shadow-tile`
     gave the resting card a .14 ambient of its own. At .09 a hovered tile cast
     a fainter shadow at its sides than a resting one, so the lift was reading
     as a card going back rather than coming forward. A hover has to be at
     least as strong as the rest everywhere, not only where it is wider. */
  --shadow-lift:
    0 1px 2px rgba(28, 26, 23, .07),
    0 8px 18px -8px rgba(28, 26, 23, .16);
  /* The taped polaroid's own pair, because a card held at the top by a strip of
     tape does not cast the shadow of a card floating free.

     The governing number is the alpha, not the blur. White stock on warm sand
     is the highest-contrast edge on the page, so anything readable as gray
     under it reads as paint: `0 10px 28px` at .20 was a halo, and four layers
     at .11 to .14 was the same halo in better shape. Both were rejected on
     sight. Nothing here goes past .08, and the resting pair past .06: at this
     weight the shadow is a hairline of separation and the lift carries the
     hover almost on its own, which is the point. That lift is 2px, halved on
     2026-09-17: a card held down by tape does not travel, and the shadow's
     reach is what says it rose at all.

     Each is a contact layer plus ambient. Contact is 1px of blur and no
     spread, so the card keeps a crisp edge. Ambient carries a negative spread
     that pulls it back inside the card's box on every side the y offset does
     not push it past, so the long shadow escapes at the foot and the top edge
     stays clean, which is where the tape holds the card flat. Every layer
     takes the same 1-2px positive x, which puts the light in the upper left
     and keeps it there on all three cards.

     The lift adds one layer rather than only darkening: a hover this light has
     to change the shadow's shape to register at all, and reach is the part the
     eye reads as height. */
  --shadow-taped:
    1px 1px 1px rgba(28, 26, 23, .06),
    1px 2px 4px -2px rgba(28, 26, 23, .04);
  --shadow-taped-lift:
    1px 1px 1px rgba(28, 26, 23, .08),
    1px 4px 6px -2px rgba(28, 26, 23, .05),
    2px 10px 20px -8px rgba(28, 26, 23, .07);

  /* Type. Two families, two jobs. */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* The wordmark, and nothing else. A third family needs a job no other face
     can do, and this one has it: the mark is the name as it is said, so it is
     a logotype rather than a heading, and a logotype set in the body sans is
     the site labelling itself in its own body copy. Gabarito is a soft
     geometric, rounded where Public Sans is squared, which is what makes the
     two read as different voices at the same size. Weight 600 only, since the
     mark is the only thing that uses it, and 600 rather than 500 because the
     page's font smoothing costs the mark about a weight step. */
  --mark: "Gabarito", "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Code only. It exists for one thing: the git refs on the say hi page are
     refs, not prose, and a ref set in a proportional face stops looking like
     something you could type. Nothing else on the site uses it. */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-display: clamp(38px, 5.5vw, 58px);
  --text-h1: 32px;
  --text-h2: 24px;
  /* A subsection inside a write-up's body. One step above the prose, one below
     the section heading, so a question asked inside a section reads as part of
     that section rather than as a fifth one. Added 2026-09-14 for Karmel's
     `does every board have a verified solution?`. */
  --text-h3: 20px;
  --text-body: 18px;
  --text-sm: 16px;
  --text-label: 14px;   /* interface floor */
  /* Under the floor, and every use owes an argument where it is written. Three
     so far, and they pass the same test: caps or a short label, nothing
     depending on being read, and the fact said in full somewhere else. The caps
     label over the project name in the board's reader box, added 2026-09-14;
     the scale note under Karmel's phone mock, 2026-09-16; the write-up's
     eyebrow, 2026-09-18. A fourth needs its own argument. */
  --text-micro: 12px;
  /* Fine print, and the bottom of the scale. One user: the version, size and
     minimum macOS under sift's download button, which is not interface text but
     a footnote to a control, read once while deciding whether to press it and
     never navigated by. It is well under the 14px floor and says so in its own
     rule in `notes.css`. Added 2026-09-18. Nothing else gets it without the
     same argument, and a third size in this territory is a sign the answer was
     smaller type where it should have been less to say. */

  /* Space. 4px scale, nothing off it. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Radius. Small end, so a corner never eats the padding inside it. */
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-tile: 10px;   /* the Pinterest resting state */
  --radius-full: 999px;  /* pills only */

  /* Motion. Transform and opacity only. */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  /* One thing uses this: the nav's marker traveling from one word to the
     next. It is the only motion on the site a reader watches on purpose
     rather than catching out of the corner of an eye, and at 200ms it read as
     a cut rather than a move. */
  --dur-travel: 320ms;
  --dur-wordmark: 1300ms; /* the three-stage wordmark entrance, once per load */
}