/* What's Good Napa — design tokens. Direction A, "After Dark", on Nash's dark palette. Recoloured 2026-08-30. The site commits to a single dark world: it is mostly read at night, in a bar, on a phone. Do not add a light theme without asking. The palette is Nash's Primary Blue ramp with Chartreuse 50 as the one accent. Type scale, spacing and the three faces are unchanged from the sodium version. Nash's ramp, and where each named step went: Blue 50 #F8FAFC -> --paper Blue 100 #E5EDF6 -> --paper-dim Blue 200 #B1C4DC -> --mute and --figure Blue 300 #5A7498 -> UNUSED as text. It measures 4.21:1 on Blue 600 and 3.45:1 on the raised ground, so it fails AA at every size we set. The two quiet text steps below are derived from it instead. Blue 400 #314868 -> --ink-400 Blue 500 #0B1F3A -> --ink-700 Blue 600 #01051E -> --ink-900 Chart 50 #C9FF00 -> --chartreuse Chart 100 #6CD800 -> unused. It is for light blues only. Chart 200 #193000 -> unused. It is for light blues only. Six values are not named steps. Every one is interpolated in OKLCH along the ramp's own axis, between the two named steps it sits between, so the hue and chroma travel with the ramp rather than being guessed: --ink-850 #030F29 Blue 600 -> Blue 500 at t 0.408 --ink-800 #061732 Blue 600 -> Blue 500 at t 0.702 --ink-600 #1A304D Blue 500 -> Blue 400 at t 0.418 --ink-500 #263D5B Blue 500 -> Blue 400 at t 0.733 --mute-2 #93A9C5 Blue 200 -> Blue 300 at t 1/3 --mute-3 #768EAE Blue 200 -> Blue 300 at t 2/3 The four ground steps sit at the same proportional positions the sodium scale used, so the page keeps its density: the rules did not get heavier relative to one another, the whole scale just moved onto navy. The two text steps replace Blue 300 at the only lightnesses that clear AA on both the page ground and the raised ground a row hover puts under them. */ :root{ /* ground. Navy, from the deepest to the lightest line we draw. */ --ink-900:#01051E; /* page ground. Blue 600 */ --ink-850:#030F29; /* row hover. derived */ --ink-800:#061732; /* raised surface, cards, inputs. derived */ --ink-700:#0B1F3A; /* hairline between rows. Blue 500 */ --ink-600:#1A304D; /* rules, section dividers. derived */ --ink-500:#263D5B; /* borders on quiet controls. derived */ --ink-400:#314868; /* borders on active controls. Blue 400 */ /* type. Every step clears WCAG AA on --ink-900 and on --ink-850. Ratios on --ink-900: 19.27, 17.06, 11.33, 8.37, 6.00. */ --paper:#F8FAFC; /* primary text. Blue 50 */ --paper-dim:#E5EDF6; /* emphasis inside muted text. Blue 100 */ --mute:#B1C4DC; /* secondary text. Blue 200 */ --mute-2:#93A9C5; /* tertiary, venue and meta. derived */ --mute-3:#768EAE; /* quietest, source labels. 6.00:1 on --ink-900 and 5.31:1 on --ink-800, so it holds up at 10px on a raised card as well as on the page. Blue 300 was tried here first and measured 4.21:1, which fails, the same way #6E655A failed on the sodium ground. */ /* Times and counts. Mono numerals set apart from prose, one step under the act name. On the sodium palette this was a softened amber; there is no softened chartreuse, because the ramp's other two greens are for light grounds only, so the rail is carried by the blue ramp instead. It runs down every row, and chartreuse on every row would be scenery. It is the same value as --mute on purpose. The softened amber measured 10.71:1 on the old ground, sitting between the emphasis step and the secondary one; Blue 200 at 11.33:1 lands in the same place on this ground. Set a step brighter it read as a second headline beside the act name. The rail is told apart by its column and its mono face, which is what carried it before the colour did. */ --figure:#B1C4DC; /* Blue 200 */ /* the one bright colour: Chartreuse 50. It means "the system is pointing at this". It is never a background larger than a control, never body text, never more than one per row. Chartreuse 100 and 200 are for light blues and would disappear here, so this is the only chartreuse on the site. */ --chartreuse:#C9FF00; --accent-ink:#01051E; /* text on any bright fill. 17.07:1 on chartreuse. */ /* state. Not from Nash's ramp: these are functional, and a reader needs cancelled, failed and approved to read as themselves rather than as the brand. All three clear AA on --ink-900 and on --ink-800. */ --ok:#7FB069; --warn:#E8B44A; --bad:#E2593F; /* type stacks */ --font-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif; --font-body:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* scale */ --step--2:10px; --step--1:13px; --step-0:14.5px; --step-1:17px; --step-2:25px; /* act name */ --step-3:30px; /* day header */ --step-4:clamp(46px,9vw,76px); /* wordmark */ --measure:58ch; --radius:2px; /* chips and inputs only. Nothing else is rounded. */ --gap:20px; } /* Rules that keep the direction intact: 1. Chartreuse is a signal, never scenery, and never a background. An eyebrow, a dot, a single-stroke rule, a hover, a focus ring, one emphasised figure, the primary button. Not a card, a pane, a band, body text or a default link colour. 2. The act name is the loudest thing in a row. Venue and time support it. 3. Times are mono and tabular so they form a readable left rail. 4. Uppercase is for display, labels and chips only. Never for body copy. 5. One accent per row. A row with a chartreuse tag does not also get a chartreuse figure. */