/* tokens.css — the design system. CSS custom properties on :root pierce the
   Shadow DOM boundary, so every pg- component reads these via var(). Single
   source of visual truth → cohesion across surfaces. Text colors meet WCAG AA
   (≥4.5:1 body, ≥3:1 large/UI) on the dark surface — fixes the audit's
   --cream-dim 3.4:1 contrast failure. */
:root {
  color-scheme: dark;

  /* Surfaces */
  --pg-bg:        #0b0d12;   /* app background */
  --pg-surface:   #15131f;   /* cards / panels */
  --pg-surface-2: #1d1b29;   /* raised / hover */
  --pg-border:    #2b2940;
  --pg-overlay:   rgba(6, 7, 11, 0.72);

  /* Text (contrast-checked on --pg-bg) */
  --pg-fg:        #f4f1ea;   /* primary text — 16.8:1 */
  --pg-text:      #f4f1ea;
  --pg-text-dim:  #b6bdcf;   /* secondary — ~9:1 (was #5a6380 @ 3.4:1, FAILED) */
  --pg-text-mute: #8d93a6;   /* tertiary/labels — ~5.0:1, AA body */

  /* Brand */
  --pg-accent:      #7c6cff;
  --pg-accent-2:    #9d8bff;
  --pg-accent-ink:  #ffffff;  /* text on accent — AA on accent */
  --pg-success:     #36d39a;
  --pg-warning:     #f5b54b;
  --pg-danger:      #ff6b6b;
  --pg-danger-ink:  #2a0d0d;

  /* State accents for the voice pipeline (text+color, never color alone) */
  --pg-state-ready:     var(--pg-text-mute);
  --pg-state-listening: var(--pg-accent-2);
  --pg-state-thinking:  var(--pg-warning);
  --pg-state-speaking:  var(--pg-success);
  --pg-state-error:     var(--pg-danger);

  /* Typography */
  --pg-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pg-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pg-fs-xs: .75rem;  --pg-fs-sm: .875rem; --pg-fs-md: 1rem;
  --pg-fs-lg: 1.25rem; --pg-fs-xl: 1.75rem; --pg-fs-2xl: 2.5rem;
  --pg-lh: 1.5;

  /* Spacing scale (4px base) */
  --pg-1: .25rem; --pg-2: .5rem; --pg-3: .75rem; --pg-4: 1rem;
  --pg-5: 1.5rem; --pg-6: 2rem; --pg-7: 3rem; --pg-8: 4rem;

  /* Radii / shadows / layout */
  --pg-radius-sm: .4rem; --pg-radius: .65rem; --pg-radius-lg: 1rem; --pg-radius-pill: 999px;
  --pg-shadow: 0 6px 24px rgba(0,0,0,.35);
  --pg-shadow-lg: 0 16px 48px rgba(0,0,0,.5);
  --pg-tap: 44px;            /* minimum touch target */
  --pg-z-modal: 1000; --pg-z-toast: 1100;

  /* Motion (respect reduced-motion at the component level too) */
  --pg-ease: cubic-bezier(.2,.7,.2,1);
  --pg-dur: 180ms;
  --pg-focus: 0 0 0 3px color-mix(in srgb, var(--pg-accent) 55%, transparent);
}

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