/* Pointer Paws design tokens, codified from extension/popup/popup.css + tools/paw.py.
   Web pages may load Nunito from Google Fonts; the extension popup must NOT (no network requests). */
:root {
  /* color: light */
  --pp-bg: #fffaf4;
  --pp-surface: #ffffff;
  --pp-ink: #2a2230;
  --pp-muted: #6f6575;
  --pp-line: #e9dfd4;
  --pp-line-strong: #d8c3b0;
  --pp-accent: #e8813a;        /* decorative / with ink text only (2.8:1 on white) */
  --pp-accent-soft: #fde8d6;
  --pp-accent-strong: #b4541a; /* orange text, links, white-on-orange buttons (5.0:1) */
  --pp-on-accent-strong: #ffffff;
  --pp-gold: #ffc531;          /* happy paw: "clickable" only */
  --pp-bean: #f096a5;
  --pp-outline: #181620;
  --pp-dark-tile: #1d1b22;
  --pp-promo-gradient: linear-gradient(135deg, #fffaf4 0%, #fde8d6 100%);

  /* type */
  --pp-font-display: "Nunito", "Segoe UI", system-ui, sans-serif;
  --pp-font-body: "Segoe UI", system-ui, -apple-system, sans-serif;
  --pp-text-xs: 11px;
  --pp-text-sm: 13px;
  --pp-text-md: 15px;
  --pp-text-lg: 18px;
  --pp-text-xl: 24px;
  --pp-text-2xl: 32px;
  --pp-text-3xl: 48px;
  --pp-weight-body: 400;
  --pp-weight-strong: 600;
  --pp-weight-display: 900;
  --pp-leading-tight: 1.05;
  --pp-leading-body: 1.45;

  /* shape + space */
  --pp-radius-sm: 6px;
  --pp-radius-md: 10px;
  --pp-radius-lg: 14px;
  --pp-radius-pill: 999px;
  --pp-space-1: 4px;
  --pp-space-2: 8px;
  --pp-space-3: 12px;
  --pp-space-4: 16px;
  --pp-space-5: 24px;
  --pp-space-6: 32px;
  --pp-space-7: 48px;
  --pp-shadow: 0 8px 24px rgb(42 34 48 / 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pp-bg: #1d1b22;
    --pp-surface: #2a2630;
    --pp-ink: #f6efe7;
    --pp-muted: #b9adb8;
    --pp-line: #3a3440;
    --pp-line-strong: #4d4553;
    --pp-accent: #f0a060;
    --pp-accent-soft: #4a3326;
    --pp-accent-strong: #f0a060;
    --pp-on-accent-strong: #1d1b22;
    --pp-promo-gradient: linear-gradient(135deg, #1d1b22 0%, #3a2a22 100%);
    --pp-shadow: 0 8px 24px rgb(0 0 0 / 0.4);
  }
}

:root[data-theme="dark"] {
  --pp-bg: #1d1b22;
  --pp-surface: #2a2630;
  --pp-ink: #f6efe7;
  --pp-muted: #b9adb8;
  --pp-line: #3a3440;
  --pp-line-strong: #4d4553;
  --pp-accent: #f0a060;
  --pp-accent-soft: #4a3326;
  --pp-accent-strong: #f0a060;
  --pp-on-accent-strong: #1d1b22;
  --pp-promo-gradient: linear-gradient(135deg, #1d1b22 0%, #3a2a22 100%);
  --pp-shadow: 0 8px 24px rgb(0 0 0 / 0.4);
}