/* Pulsar67 design tokens — single source of truth (Phase 0 of the frontend overhaul).
   Loaded first in every layout. New components consume these variables so the
   brand, spacing, radius, and type scales stay consistent across the marketing
   site, client area, and admin console. Dark mode is a token swap, not a
   per-component override. */

:root {
  /* Brand — one hue family across the whole product */
  --p67-brand: #5a52b8;
  --p67-brand-strong: #463d97;
  --p67-brand-soft: #eef0fb;
  --p67-brand-border: #cdc9ee;
  --p67-brand-contrast: #ffffff;

  --p67-accent: #0f766e;
  --p67-accent-soft: #e6f4f1;

  /* Semantic status */
  --p67-ok: #0f7a4a;
  --p67-ok-soft: #ecfdf3;
  --p67-warn: #9a5b0a;
  --p67-warn-soft: #fff7ed;
  --p67-danger: #b42318;
  --p67-danger-soft: #fef2f2;
  --p67-info: #1d4ed8;
  --p67-info-soft: #eff6ff;

  /* Surfaces + text (light) */
  --p67-surface-1: #ffffff;
  --p67-surface-2: #f6f8fc;
  --p67-surface-3: #eef1f7;
  --p67-border: #d9dee8;
  --p67-border-strong: #b8c0cf;
  --p67-ink: #111827;
  --p67-ink-soft: #374151;
  --p67-ink-muted: #6b7280;
  --p67-on-brand: #ffffff;

  /* Spacing scale */
  --p67-space-1: 4px;
  --p67-space-2: 8px;
  --p67-space-3: 12px;
  --p67-space-4: 16px;
  --p67-space-5: 24px;
  --p67-space-6: 32px;
  --p67-space-7: 48px;
  --p67-space-8: 64px;

  /* Radius */
  --p67-radius-sm: 8px;
  --p67-radius-md: 10px;
  --p67-radius-lg: 14px;
  --p67-radius-pill: 999px;

  /* Type scale */
  --p67-text-xs: 0.75rem;
  --p67-text-sm: 0.875rem;
  --p67-text-base: 1rem;
  --p67-text-lg: 1.125rem;
  --p67-text-xl: 1.25rem;
  --p67-text-2xl: 1.5rem;
  --p67-text-3xl: 1.875rem;

  /* Weights (standard steps only) */
  --p67-fw-normal: 400;
  --p67-fw-medium: 500;
  --p67-fw-semibold: 600;
  --p67-fw-bold: 700;

  /* Elevation */
  --p67-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --p67-shadow-md: 0 6px 20px rgba(17, 24, 39, 0.10);
  --p67-shadow-lg: 0 18px 42px rgba(17, 24, 39, 0.16);

  /* Fonts */
  --p67-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --p67-font-head: "Space Grotesk", "Inter", sans-serif;

  /* Motion */
  --p67-transition: 150ms ease;
}

[data-p67-theme="dark"] {
  --p67-brand: #8b5cf6;
  --p67-brand-strong: #a78bfa;
  --p67-brand-soft: rgba(139, 92, 246, 0.18);
  --p67-brand-border: rgba(139, 92, 246, 0.42);
  --p67-brand-contrast: #15131f;

  --p67-accent: #37d4a5;
  --p67-accent-soft: rgba(55, 212, 165, 0.16);

  --p67-ok: #34d399;
  --p67-ok-soft: rgba(52, 211, 153, 0.15);
  --p67-warn: #fbbf24;
  --p67-warn-soft: rgba(251, 191, 36, 0.15);
  --p67-danger: #f87171;
  --p67-danger-soft: rgba(248, 113, 113, 0.15);
  --p67-info: #60a5fa;
  --p67-info-soft: rgba(96, 165, 250, 0.15);

  --p67-surface-1: #1d1928;
  --p67-surface-2: #15131f;
  --p67-surface-3: #211d2e;
  --p67-border: rgba(255, 255, 255, 0.13);
  --p67-border-strong: rgba(255, 255, 255, 0.24);
  --p67-ink: #f8fafc;
  --p67-ink-soft: #cbd5e1;
  --p67-ink-muted: #9aa3b2;
  --p67-on-brand: #ffffff;

  --p67-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --p67-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --p67-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
}

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