/* Tamm's design system. IN DEVELOPMENT: each Tamm correction changes this file.
   This is the one file a page links. It imports the four parts, then adds the
   foundations they share (lines, space, layout, focus) and a base for plain HTML.

     palette.css   colour: --c-*, --c-*-ink, grounds, muted ink, semantic roles, chart order
     type.css      faces, three weights, the size scale, --measure
     controls.css  buttons, fields, links, tabs, badges, tags, status, alert, toast,
                   skip link, progress
     content.css   callout, quote, code, table, lists, details, kbd, hr, hash,
                   stat, bars, timeline, waterfall, chat

   Light by default. Dark follows prefers-color-scheme, or data-theme="dark" on any
   element; data-theme="light" pins light. No toggle. Run check-palette.py after
   any colour change. See SKILL.md for the rules. */
@import url("palette.css");
@import url("type.css");
@import url("controls.css");
@import url("content.css");

/* ---- Lines. Never 1px. A line has a job. ---- */
:root {
  --line-2: 2px;                                   /* small edge: field, kbd, link underline */
  --line-4: 4px;                                   /* rule: button edge, hr, kbd base */
  --line-8: 8px;                                   /* heavy edge: callout, selected tab */
  --line-double: calc(var(--line-2) * 3) double;   /* width + style: quote. 2px, 2px gap, 2px */
}

/* ---- Space and layout. One 8px step; a half and a quarter step for tight pads. ---- */
:root {
  --space-quarter: 2px;
  --space-half: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  --gutter: var(--space-2);         /* page side space; 16px at phone width */
  --section-gap: var(--space-6);    /* between page sections */
  /* Content rhythm is in em, so it scales with the text it sits in (19 Sep
     density). It is the one place a component tier holds a raw value. */
  --heading-above: 0.5em;
  --heading-below: 0.4em;
  --heading-chip-gap: var(--space-1);   /* a badge, status or tag inside a heading */

  /* The size floor. No text goes under 16px, except an all-caps tracked
     eyebrow (--text-label). 16px is not "small": a compact table, help text
     and an S button sit on it. */
  --text-min: 16px;
}
/* One breakpoint, 860px. Under it, columns stack and the gutter stays 16px. */
@media (min-width: 860px) {
  :root { --gutter: var(--space-4); }
}

/* ---- Native parts (select menus, scrollbars) follow the ground. ---- */
:root, [data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
[data-theme="dark"] { color-scheme: dark; }

/* ---- Base: plain HTML looks right with no class. ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;                        /* nothing is clipped: a wide table or code block scrolls inside itself */
  background: var(--bg);
  color: var(--ink);
  font: var(--weight-body) var(--text-body)/var(--lh-body) var(--font-sans);
}
h1, h2, h3, h4, h5, h6 { margin: var(--heading-above) 0 var(--heading-below); font-weight: var(--weight-loud); }
h1 { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--track-h1); }
h2 { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); letter-spacing: var(--track-h3); }
h4 { font-size: var(--text-h4); line-height: var(--lh-h4); letter-spacing: var(--track-h4); }
h5 { font-size: var(--text-h5); line-height: var(--lh-h5); letter-spacing: var(--track-h5); }
h6 { font-size: var(--text-h6); line-height: var(--lh-h6); letter-spacing: var(--track-h6); }
/* A chip in a heading sits one step after the words, at body size. */
:is(h1, h2, h3, h4, h5, h6) > :is(.t-badge, .t-status, .t-tag) { margin-inline-start: var(--heading-chip-gap); vertical-align: middle; }
:is(h1, h2, h3, h4, h5, h6) > .t-status { font-size: var(--text-body); letter-spacing: 0; }
p { margin: 0 0 var(--content-gap); max-width: var(--measure); }
b, strong { font-weight: var(--weight-strong); }
img { max-width: 100%; height: auto; }

/* Text structure, on every page: eyebrow, headline (h1), lede, body.
   An eyebrow is ALWAYS caps and tracked: a section label, a credit, a short
   annotation. It is the one small text; nothing else is small. */
.eyebrow {
  margin: 0 0 var(--space-1);
  font: var(--weight-strong) var(--text-label)/var(--lh-label) var(--font-sans);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.lede { font-size: var(--text-h4); line-height: var(--lh-h4); font-weight: var(--weight-strong); }

/* A link on a neon fill takes the fill's black text and line (controls.css
   links meet content.css callouts here). */
:is(.callout-info, .callout-success, .callout-warning, .callout-error) {
  --link-ink: var(--on-fill);
  --link-line: var(--on-fill);
  --link-line-hover: var(--on-fill);
  --link-line-visited: var(--on-fill);
  --focus: var(--on-fill);              /* an ink ring is white in dark mode: lost on yellow */
  --link-bg-focus: var(--on-fill);      /* a yellow highlighter is lost on a yellow fill */
  --link-ink-focus: var(--c-yellow);
  --link-line-focus: var(--c-yellow);
  /* An outline or quiet button on a fill: black, and black with yellow text
     on hover and press. ponytail: hover and press look alike on a fill; give
     them two looks if a callout ever holds a toolbar. */
  --btn-outline-ink: var(--on-fill);          --btn-outline-line: var(--on-fill);
  --btn-outline-bg-hover: var(--on-fill);     --btn-outline-ink-hover: var(--c-yellow);   --btn-outline-line-hover: var(--on-fill);
  --btn-outline-bg-pressed: var(--on-fill);   --btn-outline-ink-pressed: var(--c-yellow); --btn-outline-line-pressed: var(--on-fill);
  --btn-quiet-ink: var(--on-fill);
  --btn-quiet-bg-hover: var(--on-fill);       --btn-quiet-ink-hover: var(--c-yellow);     --btn-quiet-line-hover: var(--on-fill);
  --btn-quiet-bg-pressed: var(--on-fill);     --btn-quiet-ink-pressed: var(--c-yellow);   --btn-quiet-line-pressed: var(--on-fill);
}
/* Selection inverts the ground. Selected text keeps its weight, so a neon fill
   would put thin text on colour. */
::selection { background: var(--ink); color: var(--bg); }

/* Focus: anything focusable gets the one ring. Zero specificity, so a
   component rule (the link highlighter) still wins. Never outline: none. */
:where(:focus-visible) { outline: var(--focus-ring-w) var(--focus-ring-style) var(--focus); outline-offset: var(--focus-ring-gap); }