/* theme.css · the portfolio's look on top of the RAMTT design system:
   RAMTT's warm surfaces and RAMTT's shell, 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);
}

/* ── the surfaces are RAMTT's own: the warm ground #f4f3f0 and the paper
      #fcfcfb from the design system's tokens, as in the RAMTT app and in
      Zibaldone (5 October 2026, Malte: the design system as near identical as
      possible). The neutral white and gray that stood here are gone. Two
      things stay: the faintest ink is the muted ink, because the prototypes
      set it as text and RAMTT's ink 4 is never text, and the black control's
      hover is the design system's gray 750, RAMTT's own primary hover. ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --ink-4: var(--ink-3); --solid-hover: var(--gray-750); }
}
:root[data-theme="light"] { --ink-4: var(--ink-3); --solid-hover: var(--gray-750); }

/* ── dark is RAMTT's (6 October 2026, Malte: "flyt ramtts mørke tema med, selvom
      det ikke er låst"): the roles and states of RAMTT's exilinar III
      (farveloven/tokens.css, the -dark roles), so the ground #131313 is the
      lightest plane and the paper #0d0d0d and the raised #0b0b0b go down from
      it. The vendored proposal had them the other way. The inks, lines and
      accent were RAMTT's already. RAMTT marks its dark as not locked; this
      follows it as it stands. ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --raised: #0b0b0b; --raised-hover: #111110; --raised-selected: #171715; --raised-selected-hover: #1b1a18;
    --paper: #0d0d0d; --paper-hover: #131312; --paper-selected: #191917; --paper-selected-hover: #1d1c1a;
    --mat: #0f0f0f; --mat-hover: #151514; --mat-selected: #1c1b19; --mat-selected-hover: #1f1e1c;
    --ground: #131313; --ground-hover: #191918; --ground-selected: #201f1d; --ground-selected-hover: #23221f;
    --well: #151515; --well-hover: #1b1b1a; --well-selected: #22211f; --well-selected-hover: #252521;
    --pill: #171716; --pill-hover: #1d1d1c; --pill-selected: #242421; --pill-selected-hover: #282723;
  }
}
:root[data-theme="dark"] {
    --raised: #0b0b0b; --raised-hover: #111110; --raised-selected: #171715; --raised-selected-hover: #1b1a18;
    --paper: #0d0d0d; --paper-hover: #131312; --paper-selected: #191917; --paper-selected-hover: #1d1c1a;
    --mat: #0f0f0f; --mat-hover: #151514; --mat-selected: #1c1b19; --mat-selected-hover: #1f1e1c;
    --ground: #131313; --ground-hover: #191918; --ground-selected: #201f1d; --ground-selected-hover: #23221f;
    --well: #151515; --well-hover: #1b1b1a; --well-selected: #22211f; --well-selected-hover: #252521;
    --pill: #171716; --pill-hover: #1d1d1c; --pill-selected: #242421; --pill-selected-hover: #282723;
}

/* ── the shell, as RAMTT draws it (apps/app/index.html and styles/panel.css
      in RAMTT): the sidebar stands on the ground with no surface of its own,
      and the page is one paper panel on the ground, 8 from the top, the
      right and the sidebar, 36 from the bottom, radius 12, a hairline ring of
      ink at 10 % and RAMTT's soft lift. Grain at 5 % lies on the ground and
      on the paper, never over a card, and is off in dark. ── */
:root {
  --shell-sidebar-w: 220px;
  --shell-gap: 8px;
  --shell-bottom: 36px;
  --shell-radius: var(--r-contain);
  --shell-ring: 0 0 0 var(--px) var(--line-3);
  --shell-lift: 0 3px 6px -2px rgb(0 0 0 / .02), 0 1px 1px 0 rgb(0 0 0 / .04);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grain: none; } }
:root[data-theme="dark"] { --grain: none; }
body, [data-r="shell"], [data-r="sidebar"] { background-image: var(--grain); background-blend-mode: multiply; }
[data-r="shell"] { --sidebar-w: var(--shell-sidebar-w); }
[data-r="panel"] { margin: var(--shell-gap) var(--shell-gap) var(--shell-bottom) 0; border-radius: var(--shell-radius); background-image: var(--grain); background-blend-mode: multiply; box-shadow: var(--shell-ring), var(--shell-lift); }
[data-r="sidebar"] [data-r="search"] { width: auto; align-self: stretch; }
/* the sidebar speaks RAMTT's sidebar type (2026-10-06, Malte: RAMTT's way): rows and section names at 11, rows at 450 */
[data-r="sidebar-item"] { font-size: var(--fs-11); line-height: var(--lh-11); font-weight: var(--fw-450); }
[data-r="sidebar-section"] { font-size: var(--fs-11); line-height: var(--lh-11); }
/* a panel with the status line under it on the ground keeps the design system's 0: the line is what stands in RAMTT's bottom air */
[data-r="shell"] > [data-part="work"] > [data-r="panel"] { margin-bottom: 0; }
@media (max-width: 759px) { [data-r="panel"] { margin: 0; border-radius: 0; box-shadow: none; } }

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