/* PBWASH design tokens. Source-of-truth values for compact Apple-like UI. */
:root {
  color-scheme: light;

  /* Palette */
  --pb-color-bg-app: #f6f8fc;
  --pb-color-bg-elevated: #ffffff;
  --pb-color-bg-soft: #f8fafd;
  --pb-color-bg-control: rgba(255, 255, 255, 0.94);
  --pb-color-bg-hover: #f7faff;
  --pb-color-text: #111827;
  --pb-color-text-strong: #0f172a;
  --pb-color-text-muted: #64748b;
  --pb-color-text-tertiary: #8792a6;
  --pb-color-placeholder: #94a3b8;
  --pb-color-border: #dde5f0;
  --pb-color-border-subtle: #e6edf6;
  --pb-color-border-hover: #c8d4e3;
  --pb-color-accent: #2f6bff;
  --pb-color-accent-hover: #255de8;
  --pb-color-accent-soft: #eef4ff;
  --pb-color-success: #238b45;
  --pb-color-success-soft: #eaf8ef;
  --pb-color-success-border: #cdeed8;
  --pb-color-danger: #dc2626;
  --pb-color-danger-soft: #fef2f2;

  /* Radius */
  --pb-radius-xs: 8px;
  --pb-radius-sm: 10px;
  --pb-radius-md: 12px;
  --pb-radius-lg: 14px;
  --pb-radius-xl: 16px;
  --pb-radius-2xl: 18px;
  --pb-radius-pill: 999px;

  /* Shadows */
  --pb-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.045);
  --pb-shadow-hover: 0 12px 28px rgba(15, 23, 42, 0.065);
  --pb-shadow-popover: 0 14px 34px rgba(15, 23, 42, 0.14);
  --pb-shadow-none: none;

  /* Spacing */
  --pb-space-1: 4px;
  --pb-space-2: 6px;
  --pb-space-3: 8px;
  --pb-space-4: 10px;
  --pb-space-5: 12px;
  --pb-space-6: 14px;
  --pb-space-7: 16px;
  --pb-space-8: 18px;
  --pb-space-9: 20px;
  --pb-space-10: 24px;

  /* Compact density */
  --pb-control-height: 34px;
  --pb-control-height-mobile: 44px;
  --pb-icon-button-size: 34px;
  --pb-icon-button-size-mobile: 44px;
  --pb-card-padding: 14px;
  --pb-card-padding-mobile: 12px;
  --pb-toolbar-gap: 6px;

  /* Type */
  --pb-font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pb-font-size-label: 11px;
  --pb-font-size-caption: 12px;
  --pb-font-size-body-sm: 13px;
  --pb-font-size-body: 14px;
  --pb-font-size-title: 16px;
  --pb-line-label: 14px;
  --pb-line-body-sm: 17px;
  --pb-line-body: 20px;

  /* Compatibility with existing legacy variables. */
  --bg: var(--pb-color-bg-app);
  --surface: var(--pb-color-bg-elevated);
  --surface-soft: var(--pb-color-bg-soft);
  --text: var(--pb-color-text);
  --ink: var(--pb-color-text-strong);
  --muted: var(--pb-color-text-muted);
  --placeholder: var(--pb-color-placeholder);
  --border: var(--pb-color-border);
  --primary: var(--pb-color-accent);
  --primary-hover: var(--pb-color-accent-hover);
  --success: var(--pb-color-success);
  --danger: var(--pb-color-danger);
  --shadow-sm: var(--pb-shadow-card);
  --shadow-xs: 0 4px 14px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.09);

  --pbwash-system-font: var(--pb-font-system);
  --pbwash-control-height: var(--pb-control-height);
  --pbwash-control-radius: var(--pb-radius-md);
  --pbwash-panel-radius: var(--pb-radius-xl);
  --pbwash-panel-padding: var(--pb-card-padding);
  --pbwash-label-size: var(--pb-font-size-caption);
  --pbwash-label-line: 16px;
  --pbwash-control-text: var(--pb-font-size-body-sm);
  --pbwash-control-line: var(--pb-line-body-sm);
  --pbwash-hit-shadow: var(--pb-shadow-card);
}