@layer reset, base, components, utilities, theme;

@layer base {
  :root {
    --font-family: -apple-system, "system-ui", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --light-gray: #f4f4f4;
    --content-max-width: 98rem;
    --selection-color: black;
    --selection-background-color: hsl(50deg 95% 85%);

    /* Central brand color. Host apps re-theme the whole gem (primary buttons,
       auth pages, links, focus rings) by overriding this single token; the
       hover shade and translucent washes below are derived from it. */
    --color-primary: hsl(162, 40%, 42%);
    --color-primary-hover: color-mix(in oklab, var(--color-primary), black 14%);
  }

  @media (prefers-color-scheme: dark) {

  }

  ::selection {
    color: var(--selection-color);
    background: var(--selection-background-color);
  }
}