/* ═══════════════════════════════════════════════════════════════
   PassBeyond CRM — Design System
   Theme: Near-black navy + warm gold (matches recruiter app)
   Brand: navy #0B1D3A, gold #C9A84C
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Navy palette ── */
  --color-navy-950: oklch(11% 0.035 255);
  --color-navy-900: oklch(18% 0.052 252);
  --color-navy-800: oklch(22% 0.050 252);
  --color-navy-700: oklch(27% 0.044 252);
  --color-navy-600: oklch(36% 0.044 252);

  /* ── Gold palette ── */
  --color-gold-600: oklch(68% 0.16 75);
  --color-gold-500: oklch(70.5% 0.103 72);
  --color-gold-400: oklch(75% 0.100 72);
  --color-gold-300: oklch(82% 0.14 75);

  /* ── Semantic tokens — dark theme ── */
  --color-surface:      oklch(14% 0.042 252);
  --color-surface-2:    oklch(22% 0.050 252);
  --color-border:       oklch(36% 0.044 252);
  --color-text:         oklch(95% 0.010 250);
  --color-text-muted:   oklch(64% 0.030 252);
  --color-text-inverse: oklch(14% 0.042 252);

  /* ── Status ── */
  --color-success: oklch(77% 0.15 162);
  --color-warning: oklch(75% 0.13 70);
  --color-error:   oklch(59% 0.20 25);
  --color-info:    oklch(58% 0.20 262);

  /* ── Recruiter-compatible aliases (used in pipeline + future features) ── */
  --bg-base:        var(--color-surface);
  --surface-0:      var(--color-surface);
  --surface-1:      oklch(18% 0.052 252);
  --surface-2:      var(--color-surface-2);
  --surface-3:      oklch(27% 0.044 252);
  --surface:        oklch(18% 0.052 252);
  --border:         var(--color-border);
  --border-subtle:  oklch(28% 0.040 252);
  --text-primary:   var(--color-text);
  --text-secondary: oklch(78% 0.022 250);
  --text-muted:     var(--color-text-muted);
  --text-disabled:  oklch(46% 0.020 252);
  --gold:           var(--color-gold-500);
  --gold-hover:     var(--color-gold-400);
  --gold-bg:        oklch(17% 0.030 72);
  --gold-subtle:    oklch(70.5% 0.038 72);
  --success:        var(--color-success);
  --success-bg:     oklch(14% 0.030 162);
  --warning:        var(--color-warning);
  --warning-bg:     oklch(14% 0.028 70);
  --danger:         var(--color-error);
  --danger-bg:      oklch(14% 0.032 25);
  --info:           var(--color-info);
  --info-bg:        oklch(14% 0.028 262);
  --pill-ok-fg:      oklch(77% 0.15 162);
  --pill-ok-bg:      oklch(14% 0.030 162);
  --pill-fail-fg:    oklch(59% 0.20 25);
  --pill-fail-bg:    oklch(14% 0.032 25);
  --pill-warn-fg:    oklch(75% 0.13 70);
  --pill-warn-bg:    oklch(14% 0.028 70);
  --pill-info-fg:    oklch(58% 0.20 262);
  --pill-info-bg:    color-mix(in oklch, var(--color-info) 18%, transparent);
  --pill-neutral-bg: color-mix(in oklch, var(--color-text-muted) 16%, transparent);
  --pill-neutral-fg: var(--text-secondary);

  /* ── Typography ── */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Figtree', system-ui, sans-serif;
  --font-sans:    var(--font-body);
  --font-mono:    'Geist Mono', 'Cascadia Code', ui-monospace, monospace;

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

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;

  /* ── Radius / shadow / motion ── */
  --radius-sm:      6px;
  --radius:         10px;
  --radius-default: var(--radius);
  --radius-lg:      14px;
  --radius-xl:      18px;
  --radius-full:    999px;

  --shadow-sm:   0 1px 3px oklch(0% 0 0 / 0.35), 0 1px 2px oklch(0% 0 0 / 0.25);
  --shadow:      0 4px 12px oklch(0% 0 0 / 0.40), 0 2px 4px oklch(0% 0 0 / 0.20);
  --shadow-md:   0 4px 12px oklch(0% 0 0 / 0.40), 0 2px 4px oklch(0% 0 0 / 0.20);
  --shadow-lg:   0 12px 32px oklch(0% 0 0 / 0.50), 0 4px 8px oklch(0% 0 0 / 0.25);
  --shadow-gold: 0 0 0 3px color-mix(in oklch, var(--gold) 35%, transparent);

  --nav-height: 56px;

  --transition-fast: 80ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 150ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 100vh;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

a {
  color: var(--color-gold-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--color-gold-400); }

/* ── Focus ── */
:where(input, select, textarea):focus {
  outline: 2px solid var(--color-gold-500);
  outline-offset: 2px;
  border-color: transparent;
}

:where(button, a, [role="button"]):focus-visible {
  outline: 2px solid var(--color-gold-500);
  outline-offset: 2px;
  border-radius: 4px;
}

:where(button):focus { outline: none; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ── Selection ── */
::selection {
  background: color-mix(in oklch, var(--color-gold-500) 25%, transparent);
  color: var(--color-text);
}

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

/* ── Role badges ── */
.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 500; }
.badge-sysadmin  { background: var(--color-navy-900); color: var(--color-gold-400); border: 1px solid var(--color-gold-600); }
.badge-admin     { background: var(--color-navy-800); color: var(--color-text); border: 1px solid var(--color-border); }
.badge-hq        { background: var(--color-gold-500); color: var(--color-navy-900); }
.badge-dev-coord { background: var(--color-gold-300); color: var(--color-navy-900); }
.badge-rm        { background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); }

/* ── Global buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn-primary {
  background: var(--color-gold-500);
  color: var(--color-navy-900);
  font-weight: 700;
}

.btn-primary:hover { background: var(--color-gold-400); }

.btn-secondary {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Stage description markdown (shared) ──
   Rendered admin-edited stage descriptions. Used by the client-detail stage
   guide panel AND the kanban stage-edit modal preview, so the preview matches
   the real render exactly. Mirrors .stage-guide-meaning / .stage-guide-actions. */
.stage-guide-md {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-text);
}

.stage-guide-md > p:first-child {
  font-style: italic;
  color: var(--color-text-muted);
}

.stage-guide-md p {
  margin: 0 0 0.6rem;
}

.stage-guide-md ul {
  margin: 0 0 0.6rem;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stage-guide-md em {
  color: var(--color-gold-400);
}