/* Pique design tokens — single source of truth for color, type, spacing,
   and motion across the portal and every Pique web app. Import from
   @pique/app-shell/tokens.css (React apps) or load /static/shared/tokens.css
   (portal Jinja). Never hardcode brand colors or typography elsewhere. */

:root {
  /* Surface */
  --pq-page-bg: #f6f6f6;
  --pq-panel-bg: #ffffff;
  --pq-sidebar-bg: #fafafa;
  --pq-overlay-bg: rgba(255, 255, 255, 0.92);

  /* Lines */
  --pq-line: #e8e8e8;
  --pq-line-strong: #dcdcdc;
  --pq-line-soft: #f0f0f0;

  /* Text */
  --pq-text: #201d19;
  --pq-text-soft: #4b4642;
  --pq-muted: #8e877d;
  --pq-muted-soft: #b0a99d;
  --pq-muted-faint: #b3aca0;

  /* Accent / brand-dark (primary button) */
  --pq-accent: #201d19;
  --pq-accent-hover: #2f2924;

  /* Status */
  --pq-success-bg: #ecfdf5;
  --pq-success-border: #a7f3d0;
  --pq-success-text: #065f46;
  --pq-error-bg: #fef2f2;
  --pq-error-border: #fecaca;
  --pq-error-text: #991b1b;
  --pq-warn-bg: #fdf6e3;
  --pq-warn-border: #ecdfb4;
  --pq-warn-text: #735c1f;

  /* Code chip */
  --pq-code-bg: #ececec;
  --pq-code-text: #4b5563;

  /* Typography */
  --pq-font-sans: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pq-font-mono: "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Radius */
  --pq-radius-sm: 0.5rem;
  --pq-radius-md: 0.75rem;
  --pq-radius-lg: 0.875rem;
  --pq-radius-pill: 999px;

  /* Shadow */
  --pq-shadow-sm: 0 1px 2px rgba(28, 24, 20, 0.04);
  --pq-shadow-md: 0 8px 24px rgba(44, 37, 25, 0.08);
  --pq-shadow-lg: 0 18px 40px rgba(44, 37, 25, 0.12);

  /* Motion */
  --pq-transition-fast: 120ms ease;
  --pq-transition: 150ms ease;
}

/* Breakpoints (documentation; CSS can't reference vars in @media):
     sm:  640px
     md:  768px
     lg: 1024px
     xl: 1320px */