/**
 * ViaTone Pulse — Premium Design System tokens v1.0 (Phase 0)
 *
 * Career OS visual foundation.
 * - Purple = brand / primary actions
 * - Green = live / healthy / success only
 * - --a4u-* retained as aliases for strangler compatibility
 * - Prefer --pulse-* in new UI
 *
 * Spec: Docs/design/ViaTone Pulse Premium UX v1.0.md
 */

/* ─── Shared scales (theme-independent) ─────────────────────────────── */
:root {
  /* Spacing scale (4pt grid) */
  --pulse-space-0: 0;
  --pulse-space-1: 4px;
  --pulse-space-2: 8px;
  --pulse-space-3: 12px;
  --pulse-space-4: 16px;
  --pulse-space-5: 20px;
  --pulse-space-6: 24px;
  --pulse-space-7: 32px;
  --pulse-space-8: 40px;
  --pulse-space-9: 48px;
  --pulse-space-10: 64px;

  /* Radius */
  --pulse-radius-sm: 8px;
  --pulse-radius-md: 12px;
  --pulse-radius-lg: 16px;
  --pulse-radius-xl: 24px;
  --pulse-radius-full: 999px;

  /* Typography */
  --pulse-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --pulse-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --pulse-text-display: 1.875rem;   /* 30 */
  --pulse-text-title: 1.375rem;     /* 22 */
  --pulse-text-title-sm: 1.125rem;  /* 18 */
  --pulse-text-body: 0.9375rem;     /* 15 */
  --pulse-text-body-sm: 0.875rem;   /* 14 */
  --pulse-text-label: 0.8125rem;    /* 13 */
  --pulse-text-meta: 0.75rem;       /* 12 */
  --pulse-leading-tight: 1.25;
  --pulse-leading-body: 1.5;
  --pulse-tracking-tight: -0.02em;

  /* Motion */
  --pulse-motion-fast: 120ms;
  --pulse-motion-base: 180ms;
  --pulse-motion-slow: 280ms;
  --pulse-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pulse-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* Layout chrome */
  --pulse-sidebar-w: 248px;
  --pulse-sidebar-collapsed-w: 72px;
  --pulse-rail-w: 300px;
  --pulse-topbar-h: 64px;
  --pulse-bottom-nav-h: 64px;
  --pulse-content-max: 1200px;
  --pulse-content-pad: var(--pulse-space-6);

  /* Breakpoints (documentation; use in @media) */
  --pulse-bp-sm: 640px;
  --pulse-bp-md: 768px;
  --pulse-bp-lg: 1024px;
  --pulse-bp-xl: 1280px;

  /* Icon */
  --pulse-icon-sm: 16px;
  --pulse-icon-md: 18px;
  --pulse-icon-lg: 24px;
}

/* ─── Dark theme (system default when no preference / data-theme=dark) ─ */
:root,
html[data-theme="dark"] {
  --pulse-bg: #0d0f12;
  --pulse-bg-elevated: #101318;
  --pulse-surface: #15181d;
  --pulse-surface-raised: #1b1f25;
  --pulse-surface-hover: #22272f;
  --pulse-surface-active: #2a303a;
  --pulse-sidebar: #0b0d12;
  --pulse-sidebar-border: rgba(255, 255, 255, 0.08);

  --pulse-border: rgba(255, 255, 255, 0.08);
  --pulse-border-strong: rgba(255, 255, 255, 0.14);

  --pulse-text: #f4f5f6;
  --pulse-text-secondary: #c5cad1;
  --pulse-text-muted: #9299a3;
  --pulse-text-subtle: #6b7280;
  --pulse-text-inverse: #0f172a;

  /* Brand primary = purple */
  --pulse-primary: #8b7cf6;
  --pulse-primary-hover: #a79fff;
  --pulse-primary-soft: rgba(139, 124, 246, 0.14);
  --pulse-primary-contrast: #0b0d12;
  --pulse-link: #a78bfa;

  /* Success / live = green only */
  --pulse-success: #22c55e;
  --pulse-success-hover: #16a34a;
  --pulse-success-soft: rgba(34, 197, 94, 0.14);
  --pulse-success-contrast: #052e16;

  --pulse-warning: #f59e0b;
  --pulse-warning-soft: rgba(245, 158, 11, 0.12);
  --pulse-danger: #ef4444;
  --pulse-danger-soft: rgba(239, 68, 68, 0.12);
  --pulse-info: #60a5fa;
  --pulse-info-soft: rgba(96, 165, 250, 0.12);

  --pulse-input-bg: #12151a;
  --pulse-overlay: rgba(0, 0, 0, 0.55);
  --pulse-topbar-bg: rgba(13, 15, 18, 0.88);

  --pulse-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.22);
  --pulse-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.28);
  --pulse-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.36);

  --pulse-focus: 0 0 0 2px var(--pulse-bg), 0 0 0 4px var(--pulse-primary);
  --pulse-chat-mine: color-mix(in srgb, var(--pulse-primary) 28%, var(--pulse-surface));
  --pulse-chat-other: color-mix(in srgb, var(--pulse-surface) 88%, #fff 12%);
  --pulse-chat-system: transparent;

  color-scheme: dark;
}

/* ─── Light premium theme ───────────────────────────────────────────── */
html[data-theme="light"] {
  --pulse-bg: #f7f8fb;
  --pulse-bg-elevated: #ffffff;
  --pulse-surface: #ffffff;
  --pulse-surface-raised: #ffffff;
  --pulse-surface-hover: #eef1f7;
  --pulse-surface-active: #e4e9f2;
  --pulse-sidebar: #0b0d12;
  --pulse-sidebar-border: rgba(255, 255, 255, 0.08);

  --pulse-border: rgba(15, 23, 42, 0.08);
  --pulse-border-strong: rgba(15, 23, 42, 0.16);

  --pulse-text: #0f172a;
  --pulse-text-secondary: #334155;
  --pulse-text-muted: #64748b;
  --pulse-text-subtle: #94a3b8;
  --pulse-text-inverse: #f8fafc;

  --pulse-primary: #6d5ef0;
  --pulse-primary-hover: #5b4bd6;
  --pulse-primary-soft: rgba(109, 94, 240, 0.12);
  --pulse-primary-contrast: #ffffff;
  --pulse-link: #5b4bd6;

  --pulse-success: #16a34a;
  --pulse-success-hover: #15803d;
  --pulse-success-soft: rgba(22, 163, 74, 0.12);
  --pulse-success-contrast: #ffffff;

  --pulse-warning: #d97706;
  --pulse-warning-soft: rgba(217, 119, 6, 0.12);
  --pulse-danger: #dc2626;
  --pulse-danger-soft: rgba(220, 38, 38, 0.10);
  --pulse-info: #2563eb;
  --pulse-info-soft: rgba(37, 99, 235, 0.10);

  --pulse-input-bg: #ffffff;
  --pulse-overlay: rgba(15, 23, 42, 0.45);
  --pulse-topbar-bg: rgba(247, 248, 251, 0.92);

  --pulse-shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.06);
  --pulse-shadow-md: 0 12px 32px rgba(15, 23, 42, 0.08);
  --pulse-shadow-lg: 0 24px 56px rgba(15, 23, 42, 0.12);

  --pulse-focus: 0 0 0 2px var(--pulse-bg), 0 0 0 4px var(--pulse-primary);
  --pulse-chat-mine: color-mix(in srgb, var(--pulse-primary) 14%, #fff);
  --pulse-chat-other: #f1f5f9;
  --pulse-chat-system: transparent;

  color-scheme: light;
}

/* ─── Legacy --a4u-* aliases (do not remove — strangler compatibility) ─ */
:root,
html[data-theme="dark"],
html[data-theme="light"] {
  --a4u-bg: var(--pulse-bg);
  --a4u-bg-elevated: var(--pulse-bg-elevated);
  --a4u-surface: var(--pulse-surface);
  --a4u-surface-raised: var(--pulse-surface-raised);
  --a4u-surface-hover: var(--pulse-surface-hover);
  --a4u-surface-active: var(--pulse-surface-active);
  --a4u-border: var(--pulse-border);
  --a4u-border-strong: var(--pulse-border-strong);
  --a4u-text: var(--pulse-text);
  --a4u-text-secondary: var(--pulse-text-secondary);
  --a4u-muted: var(--pulse-text-muted);
  --a4u-muted-faint: var(--pulse-text-subtle);

  /* Legacy accent was green — keep for success/live call sites */
  --a4u-accent: var(--pulse-success);
  --a4u-accent-hover: var(--pulse-success-hover);
  --a4u-accent-soft: var(--pulse-success-soft);
  --a4u-accent-glow: color-mix(in srgb, var(--pulse-success) 25%, transparent);
  --a4u-success-soft: var(--pulse-success-soft);

  /* Music / brand purple */
  --a4u-music: var(--pulse-primary);
  --a4u-music-soft: var(--pulse-primary-soft);
  --a4u-link: var(--pulse-link);

  --a4u-danger: var(--pulse-danger);
  --a4u-danger-soft: var(--pulse-danger-soft);
  --a4u-warning: var(--pulse-warning);
  --a4u-warning-soft: var(--pulse-warning-soft);
  --a4u-info: var(--pulse-info);
  --a4u-info-soft: var(--pulse-info-soft);

  --a4u-input-bg: var(--pulse-input-bg);
  --a4u-overlay: var(--pulse-overlay);
  --a4u-topbar-bg: var(--pulse-topbar-bg);
  --a4u-chat-mine: var(--pulse-chat-mine);
  --a4u-chat-other: var(--pulse-chat-other);
  --a4u-chat-system: var(--pulse-chat-system);

  --a4u-radius-sm: var(--pulse-radius-sm);
  --a4u-radius-md: var(--pulse-radius-md);
  --a4u-radius-lg: var(--pulse-radius-lg);
  --a4u-radius-full: var(--pulse-radius-full);

  --a4u-shadow: var(--pulse-shadow-md);
  --a4u-shadow-sm: var(--pulse-shadow-sm);

  --a4u-font: var(--pulse-font);
  --a4u-font-mono: var(--pulse-font-mono);

  --a4u-sidebar-w: var(--pulse-sidebar-w);
  --a4u-topbar-h: var(--pulse-topbar-h);
  --a4u-bottom-nav-h: var(--pulse-bottom-nav-h);

  --a4u-focus: var(--pulse-focus);

  /* Explicit pulse semantic aliases used by new components */
  --pulse-shadow: var(--pulse-shadow-md);
  --pulse-focus-ring: var(--pulse-focus);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--pulse-bg);
  color: var(--pulse-text);
  font-family: var(--pulse-font);
  font-size: var(--pulse-text-body);
  line-height: var(--pulse-leading-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--pulse-link);
  text-decoration: none;
  transition: color var(--pulse-motion-fast) var(--pulse-ease-out);
}

a:hover {
  text-decoration: underline;
}

.a4u-mono,
.pulse-mono {
  font-family: var(--pulse-font-mono);
  font-size: 0.92em;
}

:focus-visible {
  outline: none;
  box-shadow: var(--pulse-focus);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pulse-motion-fast: 0ms;
    --pulse-motion-base: 0ms;
    --pulse-motion-slow: 0ms;
  }
}