/* Design tokens, the page itself, focus and motion. */

@layer base {
  :root {
    --ink: #000000;
    --paper: #ffffff;
    --line: #e4e4e4;
    --soft: #f5f5f5;
    --muted: #6b6b6b;
    --alert: #d7263d;
    --ok: #1c7c54;
    --biz: #e4e4e4; /* overridden per business */
    /* a tint of --biz that reads on it (TextColor); only for text on --biz */
    --biz-text: var(--ink);
    /* --biz's hue, way darker (TextColor.shade); for borders */
    --biz-shade: var(--ink);

    --font-display: "Shrikhand", "Georgia", serif;
    --font-body: "Bricolage Grotesque", system-ui, sans-serif;

    --radius-pill: 999px;
    --radius-box: 14px;
    --page: 72rem;
  }

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

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 1rem/1.55 var(--font-body);
    font-optical-sizing: auto;
  }

  main.page {
    max-width: var(--page);
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;

    @media (max-width: 640px) { padding: 1.5rem 1rem 3rem; }
  }

  :focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
    border-radius: 4px;
  }

  @media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
  }
}