/* Shared design tokens and base styles. One idea: a desk with sheets of paper on it.
   Paper is the desk, the sheet is the page on it, ink is indigo, and the highlighter marks only what needs you.
   The sheet (an artifact's page) follows the theme: the page inside it opts in to light and dark, so a dark desk
   shows a dark sheet. Fields, code and cards are "surfaces" and follow the theme too:
   text on a surface is always var(--ink), so contrast holds in both modes. */

@font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-latin-opsz-normal.6e4f2958c3.woff2') format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-latin-wght-italic.48bc8861b9.woff2') format('woff2-variations'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('/fonts/schibsted-grotesk-latin-wght-normal.4c8b93f431.woff2') format('woff2-variations'); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  --paper: #ecedf6;      /* the desk */
  --surface: #ffffff;    /* fields, code blocks and cards */
  --field-line: #7f84b6; /* borders of fields and buttons: 3.1:1 on paper, 3.6:1 on surface */
  --ink: #1c1a3d;        /* text */
  --muted: #595776;      /* secondary text, 6.1:1 on paper */
  --line: #cdd0e6;       /* dividers and control borders */
  --edge: #b9bddf;       /* the hard edge under a sheet */
  --pen: #2b3bcf;        /* actions and links */
  --on-pen: #ffffff;
  --mark: #ffdd55;       /* highlighter: only for things that need your attention */
  --danger: #b3261e;

  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale, compact: 14px base, about 1.2 ratio */
  --t-1: 0.75rem; --t0: 0.875rem; --t1: 0.9375rem; --t2: 1.125rem; --t3: 1.375rem; --t4: 1.75rem; --t5: 2rem;
  --radius: 5px;
  --control: 32px;       /* height of buttons and fields; larger on touch screens */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17162b; --surface: #201f3f; --field-line: #7a78b0; --ink: #f0eff8; --muted: #b7b5d0; --line: #35335c; --edge: #2c2a52;
    --pen: #9aa6ff; --on-pen: #15142b; --mark: #6a5f10; --danger: #ff8a80;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t0)/1.5 var(--sans); font-optical-sizing: auto; }
h1, h2, h3, p { margin: 0; }
a { color: var(--pen); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; border-radius: 3px; }
[hidden] { display: none !important; }

.serif { font-family: var(--serif); }
.muted { color: var(--muted); }
.small { font-size: var(--t-1); }

/* Controls */
button, input, select, textarea { font: inherit; color: inherit; }
button, .button {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: var(--control); padding: 0 12px;
  border: 1px solid var(--field-line); border-radius: var(--radius); background: transparent; cursor: pointer;
  font-weight: 560; text-decoration: none; color: var(--ink);
  transition: background-color 0.12s, border-color 0.12s;
}
button:hover, .button:hover { border-color: var(--ink); }
button.primary { background: var(--pen); border-color: var(--pen); color: var(--on-pen); }
button.primary:hover { filter: brightness(1.08); }
button.quiet { border-color: transparent; padding: 0 8px; color: var(--pen); }
button.quiet:hover { border-color: var(--field-line); }
button.danger { color: var(--danger); }
button[disabled] { opacity: 0.5; cursor: default; }
input, textarea, select { min-height: var(--control); padding: 5px 10px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
::placeholder { color: var(--muted); opacity: 1; }
textarea { width: 100%; resize: vertical; line-height: 1.5; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; border-color: var(--pen); }

/* The highlighter marks the first line of a reply that needs you, never the whole of a long one. */
.pending::first-line { background: var(--mark); color: var(--ink); }

/* Fingers need bigger targets than pointers. */
@media (pointer: coarse) { :root { --control: 40px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }