/* Stamp's token names, resolved onto the 0build kit's variables (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 */
  /* Space, size and shape (task #850, the redesign's rules; web/design/
     shape.md). Space is a 4px grid and nothing else: 4 8 12 16 20 24 32 40.
     Inside a group 8, between groups 16 to 24; the page's side margin 24 on
     a desktop and 16 on a phone. Every control in a row, toolbar or header
     is one height, 32px, and 44px on a touch screen. A list row is 56px
     (title and one line under it) or 44px (one line). Radii: 6 a chip, 8 a
     control, 10 a box (list, card, banner), 12 a dialog. */
  --st-space-1: 4px;
  --st-space-2: 8px;
  --st-space-3: 12px;
  --st-space-4: 16px;
  --st-space-5: 20px;
  --st-space-6: 24px;
  --st-space-8: 32px;
  --st-space-10: 40px;
  --st-page-x: 24px;
  --st-control: 32px;
  --st-row: 56px;
  --st-row-1: 44px;
  --st-radius-chip: 6px;
  --st-radius-control: 8px;
  --st-radius-box: 10px;
  --st-radius-dialog: 12px;
  /* A status tint: how much of a status colour lies under its words (a
     chip, a banner). Stronger on a dark page, where 10% does not show. */
  --st-tint: 10%;
  /* The rail's width (task #850): full, and narrowed to its icons. */
  --st-rail-w: 232px;
  --st-rail-w-min: 56px;
  /* Machine text: ids, hashes, branches, counts, times (task #850). */
  --st-mono: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --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-card: var(--z-global-shadow-small);       /* cards and lists resting on the page */
  --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-match-surface: #fde68a;                          /* matched words in search results: a highlighter yellow (artin 10-05) */
  --st-good-fill: var(--z-success-f);                   /* the kit's filled status labels (white text) */
  --st-merged-fill: #8250df;                            /* a merged pull request's label: GitHub's merged purple (green is open) */
  --st-bad-fill: var(--z-danger-f);
  --st-warn-fill: var(--st-warn-shade);
  /* Chart series (the Delivery metrics charts; dataviz reference palette,
     categorical slots 1 and 2, validated for CVD and contrast on the light,
     dark and soft-dark surfaces). */
  --st-chart-1: #2a78d6;                /* a chart's first series */
  --st-chart-2: #eb6834;                /* a chart's second series */
  /* Code and diffs (the Files panel and highlighted code; @pierre/diffs and
     @pierre/trees read them through app.css). Code is mostly ink: keywords a
     muted violet, strings a dark green, numbers a slate blue, comments grey.
     Added and removed lines get pale washes. Plain colours per theme, not
     light-dark(): Pierre builds some of its colours with relative-colour
     syntax, which does not take light-dark(). */
  --st-code-keyword: #7a4fb0;           /* keywords in highlighted code */
  --st-code-string: #2f6f4a;            /* strings in highlighted code */
  --st-code-constant: #245c94;          /* numbers, constants and links in highlighted code */
  --st-code-punctuation: #59636e;       /* punctuation in highlighted code */
  --st-code-comment: #818b98;           /* comments in highlighted code */
  --st-diff-added-surface: #c9e6d1;     /* the background of an added line */
  --st-diff-removed-surface: #f3c9cc;   /* the background of a removed line */
  --st-diff-added-emphasis: rgb(26 127 55 / 0.16);   /* the changed words inside an added line */
  --st-diff-removed-emphasis: rgb(207 34 46 / 0.14); /* the changed words inside a removed line */
  --st-diff-added-text: #2f6f4a;        /* an added or untracked file's name in the file tree */
  --st-diff-modified-text: #4a5a6e;     /* a modified or renamed file's name in the file tree */
  --st-diff-removed-text: #a33a3f;      /* a deleted file's name in the file tree */
  /* 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;
  --st-tint: 18%;
  --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);
  --st-match-surface: rgb(187 128 9 / 0.45);
  /* 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-merged-fill: #8957e5;
  --st-bad-fill: #da3633;
  --st-warn-fill: #9e6a03;
  --st-chart-1: #3987e5;
  --st-chart-2: #d95926;
  --st-code-keyword: #b9a3e3;
  --st-code-string: #9cc7a8;
  --st-code-constant: #9ab9d9;
  --st-code-punctuation: #9198a1;
  --st-code-comment: #7d8590;
  --st-diff-added-surface: #1f5130;
  --st-diff-removed-surface: #5a2226;
  --st-diff-added-emphasis: rgb(63 185 80 / 0.25);
  --st-diff-removed-emphasis: rgb(248 81 73 / 0.25);
  --st-diff-added-text: #8cc29f;
  --st-diff-modified-text: #9fb0c4;
  --st-diff-removed-text: #e08a8e;
}

/* Soft dark (artin 10-08: "a Soft dark"): the dark theme on a lighter,
   bluer grey with lower contrast, like GitHub's Dark dimmed. It rides on
   .dark (every dark rule applies) and only lifts the kit's surfaces and
   text; status colours stay the dark theme's. */
.dark-soft {
  --z-bg: #22272e;
  --z-bg-f: #adbac7;
  --z-card: #2d333b;
  --z-card-f: #adbac7;
  --z-drop: #2d333b;
  --z-drop-f: #adbac7;
  --z-muted-f: #768390;
  --z-border: #768390;
  --z-border-o: 35%;
  --z-input: #768390;
  --z-input-o: 40%;
}

/* The theme previews on Settings › Appearance: each card shows its theme's
   page, surface, text and action colours, whatever theme the page is in. */
.theme-swatch-light { --swatch-bg: #ffffff; --swatch-surface: #f6f8fa; --swatch-line: #d1d9e0; --swatch-text: #1f2328; --swatch-action: #1f883d; }
.theme-swatch-dark { --swatch-bg: #0d1117; --swatch-surface: #151b23; --swatch-line: #3d444d; --swatch-text: #e6edf3; --swatch-action: #238636; }
.theme-swatch-soft-dark { --swatch-bg: #22272e; --swatch-surface: #2d333b; --swatch-line: #444c56; --swatch-text: #adbac7; --swatch-action: #347d39; }

/* Roles: each names what a colour is for and resolves on the element that
   carries the theme (see the dark note above). */
:root, .dark {
  /* A status's tint (task #850): the light wash under a status's words —
     chips, banners, the verdict. --st-tint says how strong. */
  --st-good-tint: color-mix(in oklab, var(--st-good) var(--st-tint), var(--st-bg));
  --st-bad-tint: color-mix(in oklab, var(--st-bad) var(--st-tint), var(--st-bg));
  --st-warn-tint: color-mix(in oklab, var(--st-warn) var(--st-tint), var(--st-bg));
  --st-merged-tint: color-mix(in oklab, var(--st-merged-fill) var(--st-tint), var(--st-bg));
  --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-on-fill: var(--z-primary-f);      /* text and icons on a status or accent fill: white in every theme */
  --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);

  /* 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. */
  --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); }

/* The kit paints tooltips in --z-primary, which is Stamp's green (the
   action colour). A tooltip is not an action: it takes the page's text
   colour, dark on the light page and light on the dark one. */
.z-tooltip { --z-tooltip-bg: var(--st-text); --z-tooltip-color: var(--st-bg); }

/* A phone and a touch screen (task #850): the page's margin narrows to 16px;
   a finger gets 44px controls, whatever the width. */
@media (max-width: 767px) { :root { --st-page-x: 16px; } }
@media (pointer: coarse) { :root { --st-control: 44px; } }