/* Design tokens shared by the web app (public/) and the extension (extension/tokens.css is a copy;
   test/tokens.test.mjs keeps them identical). Apple HIG + Swiss: neutral surfaces, hairlines, one accent. */
:root {
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Surfaces */
  --bg: #ffffff;
  --bg-grouped: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f5f5f7;
  --fill: rgba(120, 120, 128, 0.12);
  --fill-strong: rgba(120, 120, 128, 0.2);
  --hairline: rgba(0, 0, 0, 0.1);
  --hairline-strong: rgba(0, 0, 0, 0.16);

  /* Text */
  --text: #1d1d1f;
  --text-2: #5f5f64;
  --text-3: #86868b;
  --on-primary: #ffffff;
  --primary: #1d1d1f;
  --primary-hover: #000000;

  /* The one accent (deep green): success, progress, focus, links */
  --accent: #0a7a50;
  --accent-soft: rgba(10, 122, 80, 0.1);
  --danger: #c4281c;
  --danger-soft: rgba(196, 40, 28, 0.08);
  --warning: #a35a00;

  /* Type scale (size / line-height) */
  --t-largetitle: 600 34px/1.12 var(--font);
  --t-title1: 600 28px/1.15 var(--font);
  --t-title2: 600 22px/1.2 var(--font);
  --t-title3: 600 19px/1.25 var(--font);
  --t-headline: 600 15px/1.35 var(--font);
  --t-body: 400 15px/1.45 var(--font);
  --t-callout: 400 14px/1.4 var(--font);
  --t-subhead: 400 13px/1.35 var(--font);
  --t-footnote: 400 12px/1.35 var(--font);
  --t-caption: 500 11px/1.3 var(--font);

  /* Spacing (4/8 grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s24: 96px;

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --tap: 44px;
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-grouped: #000000;
    --surface: #1c1c1e;
    --surface-2: #2c2c2e;
    --fill: rgba(120, 120, 128, 0.24);
    --fill-strong: rgba(120, 120, 128, 0.36);
    --hairline: rgba(255, 255, 255, 0.12);
    --hairline-strong: rgba(255, 255, 255, 0.2);
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #8d8d93;
    --on-primary: #000000;
    --primary: #f5f5f7;
    --primary-hover: #ffffff;
    --accent: #3ccf8e;
    --accent-soft: rgba(60, 207, 142, 0.14);
    --danger: #ff6b5e;
    --danger-soft: rgba(255, 107, 94, 0.12);
    --warning: #ffb340;
    --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}