/* 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 {
  color-scheme: light;

  /* Brand — one hue family across the whole product */
  --p67-brand: #5b5cf6;
  --p67-brand-strong: #4f46e5;
  --p67-brand-soft: #eef0fb;
  --p67-brand-border: #cdc9ee;
  --p67-brand-contrast: #ffffff;

  --p67-accent: #0f9f76;
  --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;

  /* Marketing-specific (not used by app components directly) */
  --p67-primary-glow: rgba(91, 92, 246, 0.16);
  --p67-shadow-soft: var(--p67-shadow-md);
  --p67-shadow-glow: 0 18px 48px rgba(91, 92, 246, 0.16);
  --p67-portal: var(--p67-surface-2);

  /* Marketing compatibility aliases (legacy --p67-* in marketing CSS) */
  --p67-primary: var(--p67-brand);
  --p67-primary-2: var(--p67-brand-strong);
  --p67-primary-dark: #3f35d6;
  --p67-primary-soft: color-mix(in srgb, var(--p67-brand) 12%, transparent);
  --p67-bg: var(--p67-surface-2);
  --p67-bg-2: var(--p67-surface-1);
  --p67-bg-3: var(--p67-surface-3);
  --p67-surface: var(--p67-surface-1);
  --p67-text: var(--p67-ink);
  --p67-text-muted: var(--p67-ink-muted);
  --p67-text-dim: #7b8494;
  --p67-text-soft: var(--p67-ink-muted);
  --p67-muted: var(--p67-ink-muted);
  --p67-heading-font: var(--p67-font-head);
  --p67-radius: var(--p67-radius-sm);
}

[data-p67-theme="dark"] {
  color-scheme: 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);

  --p67-primary-glow: rgba(167, 139, 250, 0.32);
  --p67-shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.34);
  --p67-shadow-glow: 0 18px 52px rgba(139, 92, 246, 0.22);
  --p67-portal: #080711;

  --p67-primary: var(--p67-brand);
  --p67-primary-2: var(--p67-brand-strong);
  --p67-primary-dark: #c4b5fd;
  --p67-primary-soft: var(--p67-brand-soft);
  --p67-bg: #080711;
  --p67-bg-2: #0f0c18;
  --p67-bg-3: #171224;
  --p67-surface: #12101c;
  --p67-text: var(--p67-ink);
  --p67-text-muted: #b8b4c7;
  --p67-text-dim: #8f8aa3;
  --p67-text-soft: var(--p67-text-muted);
  --p67-muted: var(--p67-text-muted);
}

/* ==========================================================================
   v3 console layer — dense application UI
   --------------------------------------------------------------------------
   The tokens above are shared with the marketing site and must keep their
   current values. Everything below is additive: new primitives that dense
   admin/client surfaces need, plus a console-tuned accent scoped to
   .p67-console-body so public pages keep the existing brand indigo.
   ========================================================================== */

:root {
  /* Control sizing — one ladder for buttons, inputs, selects, pills */
  --p67-control-h-sm: 28px;
  --p67-control-h-md: 34px;
  --p67-control-h-lg: 40px;
  --p67-control-pad-x: 12px;

  /* Data tables */
  --p67-row-h: 44px;
  --p67-row-h-compact: 36px;
  --p67-cell-pad-x: 14px;
  --p67-cell-pad-y: 6px;
  --p67-table-head-h: 36px;

  /* Shell geometry */
  --p67-topbar-h: 52px;
  --p67-sidebar-w: 232px;
  --p67-sidebar-w-collapsed: 60px;
  --p67-content-max: 1440px;
  --p67-content-pad: var(--p67-space-5);

  /* Focus — one visible ring everywhere, never removed without replacement */
  --p67-focus-ring: 0 0 0 3px color-mix(in srgb, var(--p67-brand) 34%, transparent);
  --p67-focus-ring-offset: 1px;

  /* Numeric/identifier text: aligned digits so columns scan vertically */
  --p67-font-data: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --p67-font-feature-tabular: "tnum" 1, "lnum" 1;

  /* Dense-surface type ramp (smaller than the marketing ramp by design) */
  --p67-text-micro: 0.6875rem;  /* 11px — column heads, meta */
  --p67-text-dense: 0.8125rem;  /* 13px — table cells */
}

/* Console-tuned accent. The marketing indigo (#5b5cf6) is deliberately vivid
   for hero surfaces; at admin density it vibrates against white and competes
   with status colors, so the console steps down to a deeper, calmer indigo. */
.p67-console-body {
  --p67-brand: #4f46e5;
  --p67-brand-strong: #4338ca;
  --p67-brand-soft: #eef2ff;
  --p67-brand-border: #c7d2fe;

  /* Cooler, flatter neutrals — closer to a dashboard than a landing page */
  --p67-surface-1: #ffffff;
  --p67-surface-2: #f7f8fa;
  --p67-surface-3: #eef0f4;
  --p67-border: #e3e6ec;
  --p67-border-strong: #c9cfda;
  --p67-ink: #16191f;
  --p67-ink-soft: #3d4450;
  --p67-ink-muted: #667085;

  /* Tighter corners than the marketing site — carried over from the v2
     corporate skin, which this layer absorbed. */
  --p67-radius-sm: 6px;
  --p67-radius-md: 8px;
  --p67-radius-lg: 8px;

  /* Elevation is flat in dense UI; borders do the separating work. */
  --p67-shadow-sm: none;
  --p67-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --p67-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

  /* The console uses the body font for headings too — Space Grotesk reads as
     marketing voice at dashboard sizes. */
  --p67-font-head: var(--p67-font-body);
}

[data-p67-theme="dark"] .p67-console-body,
[data-p67-theme="dark"] .p67-client-portal-body,
.p67-console-body[data-p67-theme="dark"] {
  color-scheme: dark;
  --p67-brand: #818cf8;
  --p67-brand-strong: #a5b4fc;
  --p67-brand-soft: rgba(129, 140, 248, 0.16);
  --p67-brand-border: rgba(129, 140, 248, 0.38);

  --p67-surface-1: #1a1d26;
  --p67-surface-2: #12141a;
  --p67-surface-3: #222632;
  --p67-border: rgba(255, 255, 255, 0.10);
  --p67-border-strong: rgba(255, 255, 255, 0.18);
  --p67-ink: #f3f4f6;
  --p67-ink-soft: #d1d5db;
  --p67-ink-muted: #9ca3af;
  --p67-shadow-sm: none;
}

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