/* theme.css · the portfolio's look on top of the RAMTT design system:
   neutral white and gray surfaces, black controls, the purple accent kept
   for focus rings and a few marks, and a smaller, sharper type.

   Every value is a design system token, or a mix of two tokens. The rules
   below change only what the look needs, and theme/spec.mjs writes the same
   changes into the specification the measured check reads. */

/* ── the type: one size smaller, Inter with the features Linear uses, and a lighter text weight ── */
:root {
  --fs-15: 14px; --lh-15: 22px;
  --fs-20: 18px; --lh-20: 24px;
  --fs-24: 21px; --lh-24: 28px;
  --fw-450: 400;
  --font-features: "kern" 1, "calt" 1, "liga" 1, "cv01" 1, "ss03" 1;
  /* black controls: ink on paper in light, the light ink on dark in dark */
  --solid: var(--ink);
  --solid-hover: color-mix(in oklab, var(--ink) 84%, var(--raised));
  --on-solid: var(--raised);
}

/* ── neutral surfaces in light: white paper, gray ground, no warm tint.
      This is a token layer, as the design system's tokens.css is, so the
      values are written here once; every component reads the tokens. Charts
      read these values as text, so they are plain colors. Dark keeps the
      design system's own surfaces. ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  --paper: #ffffff;
  --ground: #f6f6f6;
  --ground-hover: #eeeeee;
  --ground-selected: #eaeaea;
  --ground-selected-hover: #e4e4e4;
  --paper-hover: #f6f6f6;
  --paper-selected: #f1f1f1;
  --paper-selected-hover: #ebebeb;
  --raised-hover: #f7f7f7;
  --raised-selected: #f2f2f2;
  --raised-selected-hover: #ececec;
  --ink-2: #4a4a4a;
  --ink-3: #666666;
  --ink-4: #666666;
  --solid-hover: #2f2f2f;
}
}
:root[data-theme="light"] {
  --paper: #ffffff;
  --ground: #f6f6f6;
  --ground-hover: #eeeeee;
  --ground-selected: #eaeaea;
  --ground-selected-hover: #e4e4e4;
  --paper-hover: #f6f6f6;
  --paper-selected: #f1f1f1;
  --paper-selected-hover: #ebebeb;
  --raised-hover: #f7f7f7;
  --raised-selected: #f2f2f2;
  --raised-selected-hover: #ececec;
  --ink-2: #4a4a4a;
  --ink-3: #666666;
  --ink-4: #666666;
  --solid-hover: #2f2f2f;
}

/* ── controls that were purple are black ── */
[data-r="button"][data-variant="primary"] { background-color: var(--solid); color: var(--on-solid); }
@media (hover: hover) { [data-r="button"][data-variant="primary"]:is(:hover, [data-force="hover"]):not([aria-disabled="true"]) { background-color: var(--solid-hover); color: var(--on-solid); } }
[data-r="split-button"][data-variant="primary"] > [data-r="button"] { background-color: var(--solid); color: var(--on-solid); }
[data-r="switch"][aria-checked="true"] { background-color: var(--solid); }
[data-r="checkbox"][aria-checked="true"], [data-r="checkbox"][aria-checked="mixed"] { background-color: var(--solid); }
[data-r="radio"][aria-checked="true"] { background-color: var(--solid); }
[data-r="message-box"] [data-part="send"] { background-color: var(--solid); color: var(--on-solid); }

/* ── fewer cards: a number stands on the page with its label, without a box ── */
[data-r="stat"] { padding: 4px 0 0; border-radius: 0; background: transparent; box-shadow: none; }