/* =========================================================================
   TradeKit shared design-language tokens — the Overprint kit
   (docs/design-language.md): art inks, hairline rules, how inks overprint,
   the LCD readout, and the motion curves.

   Loaded right AFTER palettes.css by both front ends:
     - the app: @import in desktop/web/src/index.css;
     - marketing: a <link> in marketing/src/_includes/base.njk.

   Every token derives from the active palette's roles, so any theme
   re-inks it. The defaults sit in zero-specificity :where() rules, so any
   palette block in palettes.css may override them (the built-in Light sets
   its art inks explicitly). They resolve on <html>, where the palette roles
   live, so var(--series-1) and friends read the active theme.

   Layout tokens (--frame, --pad, --nav-h, --axis-w, --line-h, …) and
   marketing's --font-display wiring stay per front end.
   ========================================================================= */

/* Ink fills: anything filled with an art ink sets --fill on itself, and its
   text picks black or white from the fill's own lightness —
     color: oklch(from var(--fill) clamp(0, calc((0.6 - l) * 100000), 1) 0 0);
   (black above OKLCH L 0.6, white below; the ×100000 makes it a hard
   switch, no in-between grays). Registered so keyframes can step it (the
   ink-cycling "disco" hover). Not inherited: set it where it's painted. */
@property --fill {
  syntax: '<color>';
  inherits: false;
  initial-value: #000;
}

:where(:root) {
  /* The art inks — color printed on top of paper and ink, named for their
     role in the built-in Light (which sets its fluorescents explicitly).
     Everywhere else they map onto palette roles: */
  --ink-1: var(--series-1);   /* key cyan: the ridge, marks — overprints everything */
  --ink-2: var(--warning);    /* sun yellow */
  --ink-3: var(--series-7);   /* fluoro pink */
  --ink-4: var(--danger);     /* hot red — also resistance / down */
  --ink-5: var(--series-5);   /* ember orange */
  --ink-6: var(--success);    /* go green — also support / up */
  --ink-7: var(--series-3);   /* violet */
  --ink-8: var(--series-4);   /* teal */

  /* Hairlines and ink tints. --rule is the structural hairline (frame,
     full-bleed rules, grid cells); --rule-soft the quieter one for dense UI
     (field borders at rest, row separators), at matched contrast in both
     modes (~1.6:1 on paper). */
  --rule: var(--foreground);
  --rule-soft: color-mix(in srgb, var(--foreground) 22%, transparent);
  --ink-soft: color-mix(in srgb, var(--foreground) 62%, transparent);
  --ink-faint: color-mix(in srgb, var(--foreground) 10%, transparent);
  /* Text on an ink fill where the --fill switch can't run (vivid inks read
     best with near-black on top). */
  --on-ink: var(--foreground);

  /* How art inks meet: multiply on paper (risograph), screen on black.
     Art only — never behind text or data. */
  --overprint: multiply;

  /* Seven-segment readouts: lit segments, ghost segments, and the glow
     (dark only). */
  --lcd: var(--foreground);
  --lcd-ghost: color-mix(in srgb, var(--foreground) 7%, transparent);
  --glow: none;

  /* Motion: eased glides for reveals (rules drawing in, type rising). Hard
     steps (lamps, chevrons, the disco hover) use steps() at the call site. */
  --ease-out: cubic-bezier(0.2, 0.75, 0.1, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Dark is phosphor: hairlines at 34% ink, inks screen, LCDs glow amber. */
:where(.dark) {
  --rule: color-mix(in srgb, var(--foreground) 34%, transparent);
  --rule-soft: color-mix(in srgb, var(--foreground) 20%, transparent);
  --ink-soft: color-mix(in srgb, var(--foreground) 58%, transparent);
  --on-ink: var(--background);
  --overprint: screen;
  --lcd: var(--warning);
  --lcd-ghost: color-mix(in srgb, var(--warning) 9%, transparent);
  --glow: drop-shadow(0 0 0.4rem color-mix(in srgb, var(--warning) 55%, transparent));
}