/* The cascade, in order. Later layers win; nothing is written outside a layer except the product's
   own tokens, so no rule can quietly undo another. */
@layer base, ui, shell, screen;

@layer base {
  /* The app's own scale, on top of the product's colour, radius, shadow and motion tokens.
     Desk density by default; the phone and the station raise it (shell.css). */
  :root {
    color-scheme: light;
    --f-1: 0.75rem;   /* 12: stamps, axis labels */
    --f-2: 0.8125rem; /* 13: meta */
    --f-3: 0.875rem;  /* 14: rows, controls */
    --f-4: 0.9375rem; /* 15: body */
    --f-5: 1.0625rem; /* 17: emphasis, card titles */
    --f-6: 1.3125rem; /* 21: the answer sentence */
    --f-7: 1.625rem;  /* 26: page titles */
    --f-8: 2.25rem;   /* 36: figures */
    --f-9: 3rem;      /* 48: the one number that matters */
    --lh-tight: 1.15;
    --lh: 1.45;
    --w-prose: 66ch;
    --w-page: 1080px;
    --row: 40px;
    --control: 34px;
    --eartag: #F2C230;
    --eartag-ink: #211D15;
    --focus: 0 0 0 2px var(--board), 0 0 0 4px var(--marigold-deep);
    --hair: 1px solid var(--line);
    --edge: 1.5px solid var(--obj-line);
  }
  :root[data-light="dawn"] { color-scheme: dark; --eartag: #D9AC2A; }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--board);
    color: var(--ink);
    font: 400 var(--f-4) / var(--lh) var(--font-body);
    font-feature-settings: "ss01", "cv05";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  h1, h2, h3 { text-wrap: balance; font-weight: 750; letter-spacing: -0.01em; }
  p { text-wrap: pretty; }
  a { color: inherit; text-decoration: none; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  button:disabled { cursor: default; }
  img, svg { display: block; max-width: 100%; }
  table { border-collapse: collapse; }
  ::selection { background: var(--marigold-wash); color: var(--ink); }

  :focus { outline: none; }
  :focus-visible { box-shadow: var(--focus); border-radius: var(--radius); }

  .num, time, kbd { font-variant-numeric: tabular-nums; }
  .mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; }
  .voice { font-family: var(--font-serif); font-optical-sizing: auto; font-weight: 520; letter-spacing: -0.005em; }
  .caps { font-size: var(--f-1); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; }
  .soft { color: var(--ink-soft); }
  .faint { color: var(--ink-faint); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  }
}