/*
 * infodancer/ui — design tokens
 *
 * CSS custom properties under the --app-* prefix.
 * Names are the public API; values are defaults. Consumer sites override
 * by loading a stylesheet after tokens.css that redeclares :root selectors.
 *
 * Feature modules consume by chaining:
 *   --faq-color-fg: var(--app-color-fg, #1a1a1a);
 *
 * See DESIGN.md for the rationale on what's included and what's deferred.
 */

:root {
  /* Color */
  --app-color-bg:           #fafafa;
  --app-color-fg:           #1a1a1a;
  --app-color-bg-raised:    #ffffff;
  --app-color-fg-muted:     #5a5a5a;
  --app-color-border:       rgba(0, 0, 0, 0.12);
  --app-color-accent:       #0b5394;
  --app-color-accent-hover: #1a73b9;
  --app-color-accent-on:    #ffffff;
  --app-color-prose-fg:     #1a1a1a;
  --app-color-danger:       #b3261e;
  --app-color-success:      #1d7a3d;

  /* Typography */
  --app-font-body:           system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --app-font-display:        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --app-font-mono:           ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --app-font-size-base:      16px;
  --app-line-height-body:    1.6;
  --app-line-height-display: 1.2;

  /* Spacing — doubling scale */
  --app-space-xs: 4px;
  --app-space-sm: 8px;
  --app-space:    16px;
  --app-space-lg: 32px;
  --app-space-xl: 64px;

  /* Radii */
  --app-radius-sm:   2px;
  --app-radius:      6px;
  --app-radius-pill: 9999px;

  /* Layout */
  --app-max-width-prose: 65ch;
  --app-max-width-page:  80rem;
}