/* 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;
  }
}

/* ==========================================================================
   Shell neutrals — the Bootstrap decoupling layer.

   shell.css and app.css read ~262 var(--bs-*) values for the console and client
   shell: surfaces, borders, body text. Those resolved from Bootstrap's :root,
   so the shell could not render without Bootstrap on the page.

   The values below are the ones the shell renders with TODAY, lifted verbatim
   so the substitution is provably a no-op: Bootstrap's neutral greys in light,
   Bootstrap's dark greys for the admin console, and the client portal's own
   palette (which app.css used to express by overriding --bs-* under
   html[data-p67-theme="dark"] .p67-client-portal-body).

   These are deliberately NOT folded into the --p67-surface or --p67-ink scales
   (avoid writing a glob-slash pair in a CSS comment — it closes the comment and
   silently turns the rest of this block into parse garbage, which is exactly how
   this section broke the first time). The shell greys and the p67 palette
   genuinely differ (#dee2e6 vs #d9dee8, #212529 vs
   #111827), and collapsing them is a visual decision, not a refactor. Keeping
   them separate makes the divergence visible and reviewable instead of silently
   restyling every console page in the same commit that removes Bootstrap.
   ========================================================================== */

:root {
  --p67-line: #dee2e6;
  --p67-line-translucent: rgba(0, 0, 0, 0.175);
  --p67-shell-bg: #ffffff;
  --p67-shell-bg-subtle: #f8f9fa;
  --p67-shell-bg-muted: #e9ecef;
  --p67-shell-hover: #fcfcfd;
  --p67-shell-ink: #212529;
  --p67-shell-ink-muted: rgba(33, 37, 41, 0.75);
}

[data-p67-theme="dark"] {
  --p67-line: #495057;
  --p67-line-translucent: rgba(255, 255, 255, 0.15);
  --p67-shell-bg: #212529;
  --p67-shell-bg-subtle: #2b3035;
  --p67-shell-bg-muted: #343a40;
  --p67-shell-hover: #343a40;
  --p67-shell-ink: #dee2e6;
  --p67-shell-ink-muted: rgba(222, 226, 230, 0.75);
}

/* The dark client portal runs a warmer, deeper palette than the admin console.
   Higher specificity than the block above, so file order does not matter. */
html[data-p67-theme="dark"] .p67-client-portal-body {
  --p67-line: rgba(255, 255, 255, 0.13);
  --p67-line-translucent: rgba(255, 255, 255, 0.1);
  --p67-shell-bg: #12141a;
  --p67-shell-bg-subtle: #15131f;
  --p67-shell-bg-muted: #211d2d;
  --p67-shell-hover: rgba(255, 255, 255, 0.055);
  --p67-shell-ink: #f3f4f6;
  --p67-shell-ink-muted: #b8b4c7;
}