/* Stamp's token names, resolved onto the vendored 0build kit (light, and dark
   under the kit's .dark class).
   app.css is written against the --st-* names only; their values come from
   0build's --z-* variables wherever 0build has a counterpart, so a kit upgrade
   moves the whole page at once and the kit's names appear in this file alone.

   0build states some colours as a base plus an opacity (--z-border #000 at
   --z-border-o 10%). Those are mixed over the page background here, so every
   --st-* colour is opaque: a sticky cell or a hovered row never lets the
   content underneath show through.

   Status colours use the kit's text variants (--z-success-f / --z-warning-f /
   --z-danger-f): its plain --z-success etc. are fill colours, too light for
   the 10px badge text, which must reach 4.5:1 on every backdrop the badges
   sit on. The one exception is warn: --z-warning-f
   measures 4.497:1 on the hovered card, a hair under the line, so warn takes
   the kit palette's next step down (--color-amber-800). */
:root {
  /* Type scale (artin 09-27: "unify the font sizes, refer to other design
     systems"; then "the steps are too far apart, avoid 30"). Six close
     steps, as in compact product UIs (Linear, Vercel), instead of the
     twenty-one one-off sizes app.css had grown: 12 badges, labels and
     timestamps (nothing smaller); 13 secondary text and metadata; 14 body,
     the default; 16 section titles; 18 card and step headings, sub-page
     titles; 20 the page's main title, the largest size anywhere. Two line
     heights: tight for headings, normal for running text. app.css uses
     these names only. */
  --st-font-12: 12px;
  --st-font-13: 13px;
  --st-font-14: 14px;
  --st-font-16: 16px;
  --st-font-18: 18px;
  --st-font-20: 20px;
  --st-leading-tight: 1.25;
  --st-leading-normal: 1.5;
  /* Semantic roles (designsystems.one "AI-ready structure", artin 09-27):
     app.css names what a text or colour is for, never its size or hex, so
     one change here moves every use and a reader (or an agent) picks by
     meaning. The values above are the only primitives; each role says when
     to use it. See web/design/. */
  --st-text-caption: var(--st-font-12); /* badges, labels, timestamps, key hints */
  --st-text-meta: var(--st-font-13);    /* secondary text: metadata, help lines, counts */
  --st-text-body: var(--st-font-14);    /* running text and controls; the default */
  --st-text-section: var(--st-font-16); /* a section's title inside a page */
  --st-text-heading: var(--st-font-18); /* a card or step heading; a sub-page title */
  --st-text-title: var(--st-font-20);   /* the page's main title; nothing is larger */
  --st-color-added: #15803d;            /* lines added in a diff count (+N) */
  --st-color-removed: #b91c1c;          /* lines removed in a diff count (-N) */
  /* Stamp's own actions: signing in and connecting (artin 09-28: the sign-in
     pages use Stamp's colour, the black of its mark; green is for moving
     pull requests forward). The same black as brand/stamp-logo-mark.svg. */
  --st-action-brand: #141414;
  --st-action-brand-f: #ffffff;
  /* Elevation: what floats above the page, by what it is. */
  --st-shadow-popover: 0 12px 32px rgb(0 0 0 / 0.08);  /* menus and switchers opened from a control */
  --st-shadow-dialog: 0 24px 48px rgb(0 0 0 / 0.12);   /* modal dialogs (shortcut help, search) */
  --st-backdrop: rgb(0 0 0 / 0.25);                     /* the page behind a modal dialog */
  --st-warn-shade: var(--color-amber-800);              /* warn text and borders (see the header) */
  --st-good-fill: var(--z-success-f);                   /* the kit's filled status labels (white text) */
  --st-bad-fill: var(--z-danger-f);
  --st-warn-fill: var(--st-warn-shade);
  /* Colour (artin 09-27: "introduce some green, e.g. the merge button; no
     heavy black overall, it feels oppressive"). The kit's primary is its
     near-black; Stamp's primary action is green, as on GitHub (merge,
     create, save), with white text at 4.5:1 or better. Body text is a dark
     grey instead of near-black. The Stamp mark keeps its own black disc. */
  --z-primary: #1f883d;
  --z-primary-f: #ffffff;
  --z-bg-f: #1f2328;
}

/* Dark (task #743). The kit's .dark class carries its dark values; these
   replace the literals set above for the light page, in the same roles:
   GitHub's dark greens and diff colours, its dark body text (softer than
   white), and deeper shadows, since a light shadow is invisible on a dark
   page. Stamp's own action inverts (a light button on the dark page); the
   mark keeps its black disc. The class may sit on the root or on any
   element (the design page draws its components both ways), so the roles
   below are declared on both and resolve against whichever is nearer. */
.dark {
  color-scheme: dark;
  --z-primary: #238636;
  --z-primary-f: #ffffff;
  --z-bg-f: #e6edf3;
  --st-color-added: #3fb950;
  --st-color-removed: #f85149;
  --st-action-brand: #f0f0f0;
  --st-action-brand-f: #141414;
  --st-shadow-popover: 0 12px 32px rgb(0 0 0 / 0.5);
  --st-shadow-dialog: 0 24px 48px rgb(0 0 0 / 0.6);
  --st-backdrop: rgb(0 0 0 / 0.6);
  --st-warn-shade: var(--color-amber-400);
  /* The kit's filled status labels put white text on the status colour; on
     the dark page that colour is a bright text shade and white on it falls
     under 3:1, so the fills take GitHub's dark emphasis colours instead
     (the labels' rule is at the end of this file). */
  --st-good-fill: #238636;
  --st-bad-fill: #da3633;
  --st-warn-fill: #9e6a03;
}

/* Roles: each names what a colour is for and resolves on the element that
   carries the theme (see the dark note above). */
:root, .dark {
  --st-bg: var(--z-bg);
  --st-surface: var(--z-card);
  --st-surface-raised: var(--z-card);
  --st-surface-hover: color-mix(in oklab, var(--z-accent) var(--z-accent-o), var(--z-bg));
  --st-muted-fill: color-mix(in oklab, var(--z-muted) var(--z-muted-o), var(--z-bg));
  --st-muted-fill-half: color-mix(in oklab, var(--z-muted) calc(var(--z-muted-o) / 2), var(--z-bg));
  --st-border: color-mix(in oklab, var(--z-border) var(--z-border-o), var(--z-bg));
  --st-border-strong: color-mix(in oklab, var(--z-input) var(--z-input-o), var(--z-bg));
  --st-ring: var(--z-focus);
  --st-text: var(--z-bg-f);
  --st-muted: var(--z-muted-f);
  --st-accent: var(--z-bg-f);
  --st-accent-strong: var(--z-primary);
  --st-accent-strong-f: var(--z-primary-f);
  --st-good: var(--z-success-f);
  --st-warn: var(--st-warn-shade);
  --st-bad: var(--z-danger-f);
  --st-good-border: var(--z-success-f);
  --st-warn-border: var(--st-warn-shade);
  --st-bad-border: var(--z-danger-f);
  --st-good-surface: color-mix(in oklab, var(--z-success-f) 10%, transparent);
  --st-bad-surface: color-mix(in oklab, var(--z-danger-f) 10%, transparent);
  --st-bad-surface-border: color-mix(in oklab, var(--z-danger-f) 40%, transparent);
  --st-match-surface: color-mix(in oklab, var(--st-warn-shade) 24%, transparent); /* the matched text inside a code search fragment */

  /* Kit theme settings (the kit's own variables, not Stamp tokens): checked
     checkboxes and radios in the primary black instead of the kit's blue —
     colour on this site is reserved for status. */
  --z-form-radio-checked-bg: var(--z-primary);
  /* The kit's status components (z-label-*, z-alert-*, z-badge-*) paint text
     in --z-success/--z-warning/--z-danger, or white on them — both under
     4.5:1 at the kit's light values. Pointing them at the darker text shades
     makes every kit status component readable (ui_contrast_test.go). */
  --z-success: var(--z-success-f);
  --z-warning: var(--st-warn-shade);
  --z-danger: var(--z-danger-f);
  --z-form-radio-checked-border-color: var(--z-primary);
}

/* The kit's filled status labels (white text on a status fill, the verdict on
   the pull request page) take their fill from the roles above, so the dark
   page can give them a darker fill than the status text shade. */
.z-label-success { --z-label-bg: var(--st-good-fill); --z-label-border: var(--st-good-fill); }
.z-label-warning { --z-label-bg: var(--st-warn-fill); --z-label-border: var(--st-warn-fill); }
.z-label-danger { --z-label-bg: var(--st-bad-fill); --z-label-border: var(--st-bad-fill); }