/* Shared by the host and any app that includes @basee/head.html. Deliberately small. */
@layer reset, tokens;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, figure, pre { margin: 0; }
  img, svg, video { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --bg: light-dark(#f7f6f3, #141417);
    --surface: light-dark(#ffffff, #1d1d22);
    --text: light-dark(#1b1b1f, #e9e8e4);
    --muted: light-dark(#6b6a66, #9b9a95);
    --line: light-dark(#e2e0da, #2d2d34);
    --accent: light-dark(#2456d6, #7ea2ff);
    --ok: light-dark(#23794a, #6fd394);
    --warn: light-dark(#a3471d, #f29a6b);
    --font: system-ui, sans-serif;
    --mono: ui-monospace, "Cascadia Code", monospace;
  }
}