/* PingoBell v0.1 — shared web tokens; keep aligned with design-tokens.json.
   Copied to web/dist/assets/tokens.css at build time. Native Watch controls remain system-managed. */
:root {
  color-scheme: dark;
  --pb-background: #000000;
  --pb-surface: #1a1f1a;
  --pb-text-primary: #ffffff;
  --pb-text-secondary: #99a696;
  --pb-accent: #c7f55c;
  --pb-on-accent: #000000;
  --pb-surface-hover: #252d25;
  --pb-border: #64705f;
  --pb-accent-subtle: #2c3615;
  --pb-warning: #ffb454;
  --pb-danger: #ff6b6b;

  --pb-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --pb-font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  --pb-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --pb-type-hero-small: 36px;
  --pb-type-hero-large: 56px;
  --pb-type-hero: clamp(2.25rem, 5vw, 3.5rem);
  --pb-type-page-title: 28px;
  --pb-type-section-title: 20px;
  --pb-type-card-title: 16px;
  --pb-type-body: 16px;
  --pb-type-metadata: 14px;
  --pb-type-pairing-code: 32px;
  --pb-type-code: 14px;
  --pb-leading-hero: 1.1;
  --pb-leading-page-title: 1.2;
  --pb-leading-section-title: 1.3;
  --pb-leading-card-title: 1.4;
  --pb-leading-body: 1.6;
  --pb-leading-metadata: 1.5;
  --pb-leading-pairing-code: 1.2;
  --pb-leading-code: 1.6;

  --pb-space-4: 4px;
  --pb-space-6: 6px;
  --pb-space-8: 8px;
  --pb-space-10: 10px;
  --pb-space-12: 12px;
  --pb-space-14: 14px;
  --pb-space-16: 16px;
  --pb-space-20: 20px;
  --pb-space-24: 24px;
  --pb-space-32: 32px;
  --pb-space-48: 48px;
  --pb-space-64: 64px;
  --pb-radius-control: 12px;
  --pb-radius-card: 16px;
  --pb-radius-hero: 24px;
  --pb-radius-pill: 999px;
  --pb-width-content: 1120px;
  --pb-width-reading: 720px;
  --pb-width-sidebar: 224px;
  --pb-page-inset-small: 20px;
  --pb-page-inset-large: 32px;
  --pb-card-padding: 24px;
  --pb-target-size: 44px;
  --pb-focus-width: 2px;
  --pb-focus-offset: 3px;
  --pb-motion-fast: 120ms;
  --pb-motion-standard: 160ms;
  --pb-motion-maximum: 200ms;
}

/* CSS custom properties cannot be substituted into media-query conditions.
   Layouts use the JSON breakpoint values: 768px / 1024px.
   Components must honor prefers-reduced-motion and expose focus-visible.
   This file declares values only; it does not implement those behaviors. */