/* PaperAgent console · design tokens  (2026-10-29 · Apple)
 *
 * Apple Human Interface Guidelines, applied to a local console:
 *   type     SF Pro / PingFang SC via the system stack — no web fonts
 *   colour   Apple system colours; one accent (blue) for anything you can act on
 *   surface  grouped background #f5f5f7, white content, materials only on bars
 *   motion   iOS spring curves, short, interruptible, off under reduced motion
 *
 * Pages use the semantic --pa-* tokens. --av-* / --ed-* are aliases kept for
 * charts.js and a few inline template styles.
 */

:root {
  color-scheme: light;

  /* ---- type ---------------------------------------------------------- */
  --pa-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue",
    "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
  --pa-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue",
    "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
  --pa-font-paper: var(--pa-font-ui);   /* papers use the same face; hierarchy comes from weight */
  --pa-font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* HIG text styles (macOS/iOS): caption 12 · footnote 13 · subhead 15 · body 17
     headline 17/600 · title3 20 · title2 22 · title1 28 · large title 34 */
  --pa-t-xs: 12px;
  --pa-t-sm: 13px;
  --pa-t-md: 14px;
  --pa-t-base: 15px;
  --pa-t-lg: 17px;
  --pa-t-xl: 20px;
  --pa-t-2xl: 22px;
  --pa-t-3xl: 28px;
  --pa-t-4xl: 34px;

  /* ---- colour · light (Apple system colours) ------------------------- */
  --pa-canvas: #f5f5f7;     /* window / sidebar */
  --pa-desk: #f5f5f7;       /* grouped background */
  --pa-surface: #ffffff;
  --pa-surface-2: #f5f5f7;
  --pa-surface-3: #e8e8ed;  /* fill */
  --pa-sunken: #e8e8ed;

  --pa-ink: #1d1d1f;        /* label */
  --pa-ink-2: #6e6e73;      /* secondary label  4.9:1 */
  --pa-ink-3: #86868b;      /* tertiary label (meta, ≥12px) */
  --pa-ink-4: #aeaeb2;      /* placeholder, disabled */
  --pa-on-ink: #ffffff;

  --pa-line: rgba(0, 0, 0, .06);
  --pa-line-2: rgba(0, 0, 0, .11);
  --pa-line-3: rgba(0, 0, 0, .22);

  --pa-accent: #0071e3;       /* buttons, selection, focus, drop target */
  --pa-accent-hover: #0077ed;
  --pa-accent-ink: #0066cc;   /* links / accent text on white  5.6:1 */
  --pa-accent-wash: rgba(0, 113, 227, .08);
  --pa-accent-line: rgba(0, 113, 227, .45);
  --pa-star: #fdb515;         /* Berkeley California Gold: ratings only */
  --pa-on-star: #1d1d1f;      /* text on Berkeley gold */

  /* legacy names used throughout the component layers → accent */
  --pa-gold: var(--pa-accent);
  --pa-gold-ink: var(--pa-accent-ink);
  --pa-gold-wash: var(--pa-accent-wash);
  --pa-gold-line: var(--pa-accent-line);
  --pa-link: var(--pa-accent-ink);
  --pa-link-wash: rgba(0, 113, 227, .16);

  --pa-ok: #248a3d;   --pa-ok-wash: rgba(52, 199, 89, .14);   --pa-ok-fill: #34c759;
  --pa-warn: #c93400; --pa-warn-wash: rgba(255, 149, 0, .14); --pa-warn-fill: #ff9500;
  --pa-err: #d70015;  --pa-err-wash: rgba(255, 59, 48, .12);  --pa-err-fill: #ff3b30;
  --pa-info: #0066cc; --pa-info-wash: rgba(0, 113, 227, .10);

  /* ---- shape · depth ------------------------------------------------- */
  --pa-r-xs: 4px;
  --pa-r-sm: 8px;       /* controls */
  --pa-r-md: 12px;
  --pa-r-lg: 18px;      /* content cards */
  --pa-r-xl: 22px;
  --pa-r-pill: 980px;   /* apple.com capsule */

  --pa-shadow-1: 0 1px 2px rgba(0, 0, 0, .04);
  --pa-shadow-2: 0 2px 8px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06);
  --pa-shadow-3: 0 4px 16px rgba(0, 0, 0, .10), 0 24px 56px rgba(0, 0, 0, .14);
  --pa-sheet-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .1);
  --pa-material: rgba(255, 255, 255, .72);
  --pa-material-side: rgba(246, 246, 248, .8);
  --pa-blur: saturate(180%) blur(20px);

  --pa-focus: 0 0 0 4px rgba(0, 113, 227, .32);

  /* ---- space · layout ------------------------------------------------ */
  --pa-s1: 4px; --pa-s2: 8px; --pa-s3: 12px; --pa-s4: 16px; --pa-s5: 20px;
  --pa-s6: 24px; --pa-s7: 32px; --pa-s8: 44px; --pa-s9: 64px;
  --pa-sidebar-w: 236px;
  --pa-sidebar-w-collapsed: 68px;
  --pa-toolbar-h: 52px;
  --pa-gutter: clamp(16px, 3vw, 44px);
  --pa-content-max: 1200px;
  --pa-tap: 44px;

  /* ---- motion: iOS springs ------------------------------------------- */
  --pa-ease: cubic-bezier(.25, .1, .25, 1);
  --pa-ease-out: cubic-bezier(.32, .72, 0, 1);    /* sheets, popovers */
  --pa-spring: cubic-bezier(.34, 1.36, .64, 1);   /* small affirmations */
  --pa-d1: 150ms; --pa-d2: 250ms; --pa-d3: 350ms; --pa-d4: 500ms;

  /* ---- legacy aliases (charts.js, inline template styles) ------------ */
  --av-canvas: var(--pa-canvas);
  --av-bg: var(--pa-canvas);
  --av-surface: var(--pa-surface);
  --av-surface-2: var(--pa-surface-2);
  --av-fill-2: var(--pa-surface-3);
  --av-label: var(--pa-ink);
  --av-label-2: var(--pa-ink-2);
  --av-label-3: var(--pa-ink-3);
  --av-accent: var(--pa-accent);
  --av-grid: var(--pa-line);
  --av-series-1: #0071e3;
  --av-series-2: #ff9500;
  --av-series-3: #30b0c7;
  --av-series-4: #af52de;
  --av-series-5: #ff2d55;
  --av-series-6: #5856d6;
  --av-series-muted: var(--pa-ink-4);
  --av-content-max: 1440px;   /* kept for tests; pages use --pa-content-max */
  --ed-crit: var(--pa-err);
  --ed-warn: var(--pa-warn);
  --ed-green: var(--pa-ok);
  --ed-line: var(--pa-line);
  --text: var(--pa-ink);
  --danger: var(--pa-err);
}

/* ---- colour · dark: true black, elevated greys --------------------- */
:root[data-av-theme="dark"] {
  color-scheme: dark;
  --pa-canvas: #000000; --pa-desk: #000000;
  --pa-surface: #1c1c1e; --pa-surface-2: #2c2c2e; --pa-surface-3: #3a3a3c; --pa-sunken: #000000;
  --pa-ink: #f5f5f7; --pa-ink-2: #a1a1a6; --pa-ink-3: #8e8e93; --pa-ink-4: #636366; --pa-on-ink: #ffffff;
  --pa-line: rgba(255, 255, 255, .08); --pa-line-2: rgba(255, 255, 255, .14); --pa-line-3: rgba(255, 255, 255, .26);
  --pa-accent: #0a84ff; --pa-accent-hover: #409cff; --pa-accent-ink: #4ea1ff;
  --pa-accent-wash: rgba(10, 132, 255, .16); --pa-accent-line: rgba(10, 132, 255, .55);
  --pa-link-wash: rgba(10, 132, 255, .3);
  --pa-star: #fdb515;
  --pa-on-star: #1d1d1f;
  --pa-ok: #30d158; --pa-ok-wash: rgba(48, 209, 88, .16); --pa-ok-fill: #30d158;
  --pa-warn: #ff9f0a; --pa-warn-wash: rgba(255, 159, 10, .16); --pa-warn-fill: #ff9f0a;
  --pa-err: #ff453a; --pa-err-wash: rgba(255, 69, 58, .16); --pa-err-fill: #ff453a;
  --pa-info: #4ea1ff; --pa-info-wash: rgba(10, 132, 255, .16);
  --pa-shadow-1: none;
  --pa-shadow-2: 0 2px 8px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .4);
  --pa-shadow-3: 0 4px 16px rgba(0, 0, 0, .6), 0 24px 56px rgba(0, 0, 0, .6);
  --pa-sheet-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 0 .5px rgba(255, 255, 255, .12);
  --pa-material: rgba(28, 28, 30, .72); --pa-material-side: rgba(22, 22, 24, .8);
  --pa-focus: 0 0 0 4px rgba(10, 132, 255, .45);
  --av-series-1: #0a84ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-av-theme="light"]) {
    color-scheme: dark;
    --pa-canvas: #000000; --pa-desk: #000000;
    --pa-surface: #1c1c1e; --pa-surface-2: #2c2c2e; --pa-surface-3: #3a3a3c; --pa-sunken: #000000;
    --pa-ink: #f5f5f7; --pa-ink-2: #a1a1a6; --pa-ink-3: #8e8e93; --pa-ink-4: #636366; --pa-on-ink: #ffffff;
    --pa-line: rgba(255, 255, 255, .08); --pa-line-2: rgba(255, 255, 255, .14); --pa-line-3: rgba(255, 255, 255, .26);
    --pa-accent: #0a84ff; --pa-accent-hover: #409cff; --pa-accent-ink: #4ea1ff;
    --pa-accent-wash: rgba(10, 132, 255, .16); --pa-accent-line: rgba(10, 132, 255, .55);
    --pa-link-wash: rgba(10, 132, 255, .3);
    --pa-star: #fdb515;
    --pa-on-star: #1d1d1f;
    --pa-ok: #30d158; --pa-ok-wash: rgba(48, 209, 88, .16); --pa-ok-fill: #30d158;
    --pa-warn: #ff9f0a; --pa-warn-wash: rgba(255, 159, 10, .16); --pa-warn-fill: #ff9f0a;
    --pa-err: #ff453a; --pa-err-wash: rgba(255, 69, 58, .16); --pa-err-fill: #ff453a;
    --pa-info: #4ea1ff; --pa-info-wash: rgba(10, 132, 255, .16);
    --pa-shadow-1: none;
    --pa-shadow-2: 0 2px 8px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .4);
    --pa-shadow-3: 0 4px 16px rgba(0, 0, 0, .6), 0 24px 56px rgba(0, 0, 0, .6);
    --pa-sheet-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 0 .5px rgba(255, 255, 255, .12);
    --pa-material: rgba(28, 28, 30, .72); --pa-material-side: rgba(22, 22, 24, .8);
    --pa-focus: 0 0 0 4px rgba(10, 132, 255, .45);
    --av-series-1: #0a84ff;
  }
}

@media (prefers-contrast: more) {
  :root { --pa-ink-3: var(--pa-ink-2); --pa-line: var(--pa-line-2); --pa-line-2: var(--pa-line-3); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --pa-material: var(--pa-surface); --pa-material-side: var(--pa-canvas); --pa-blur: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --pa-d1: 0ms; --pa-d2: 0ms; --pa-d3: 0ms; --pa-d4: 0ms; }
}