@layer base;

/* Design tokens. Components reference these only; see docs in the design-taste-frontend skill (app-screens.md §9). */
:root {
  color-scheme: light dark;
  --ground: #ffffff;
  --surface: #f9f9f9;
  --raised: #ffffff;
  --border: #eaeaea;
  --rule: #f3f3f3;
  --control: #d9d9d6;
  --field: #ffffff;
  --text: #1f201d;
  --muted: #636361;
  --accent: #1b6e66;
  --primary: #1f201d;
  --primary-ink: #ffffff;
  --negative: #b42318;
  --positive: #2e7d32;

  --font: 'Instrument Sans', system-ui, sans-serif;
  --fs-title: 24px;
  --fs-body: 16px;
  --fs-ui: 14px;
  --fs-small: 12px;

  --radius-card: 22px;
  --radius-field: 10px;
  --radius-control: 999px;
  --control-height: 44px;
  --gap: 16px;
  --pad: 20px;
  --page-width: 1100px;
  --page-margin: 20px;
}

@media (min-width: 768px) {
  :root { --page-margin: 32px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #111111;
    --surface: #1c1c1c;
    --raised: #222222;
    --border: #2e2e2e;
    --rule: #1a1a1a;
    --control: #444444;
    --field: #161616;
    --text: #ffffff;
    --muted: #b4b4b4;
    --accent: #5bbfb4;
    --primary: #ffffff;
    --primary-ink: #111111;
    --negative: #f97066;
    --positive: #3fc07a;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html, body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, p { margin: 0; }

  a { color: inherit; }
  input[type='checkbox'], input[type='radio'] { accent-color: var(--text); }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .num { font-variant-numeric: tabular-nums; }
}