/* ==========================================================================
   AI WORKFORCE — Brand block
   --------------------------------------------------------------------------
   Every AI Workforce surface (landing, app, widget) shares these tokens.
   To swap the logo: replace the SVG inside `.wf-logo-mark` (landing page and
   app header) — it is sized to a 40x40 box and recolors via `currentColor`.
   Kyle picked logo #2 (2026-10-08): the violet hexagon hive-node mark —
   ~/workspace/ai-workforce/brand/opt2-hive-node.png, served locally as
   frontend/assets/logo.png. Profile/social version: brand/profile-pic.png.
   ========================================================================== */

:root {
  /* Surface palette — deep purple-black (sampled from the hive-node mark) */
  --wf-bg:            #0e0a18;  /* purple-black */
  --wf-bg-soft:       #151022;  /* raised panels */
  --wf-bg-softer:     #1c1530;  /* cards */
  --wf-line:          #2d2347;  /* hairline borders */
  --wf-line-soft:     #221b38;

  /* Brand accent — violet from the hive-node mark */
  --wf-accent:        #a06bff;
  --wf-accent-deep:   #7c3aed;
  --wf-accent-dim:    rgba(160, 107, 255, 0.12);

  /* Secondary accents */
  --wf-gold:          #f5b93d;  /* revenue / star ratings */
  --wf-amber:         #f7903d;  /* attention queue */
  --wf-red:           #f0524f;  /* fired / blocked */
  --wf-blue:          #9aa6ff;  /* links / info */

  /* Text — lavender on purple-black */
  --wf-text:          #f4f1fb;
  --wf-text-dim:      #b7adc9;
  --wf-text-faint:    #7c7392;

  /* Typography */
  --wf-font-display:  "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wf-font-body:     "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wf-font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii + motion */
  --wf-radius:        14px;
  --wf-radius-sm:     9px;
  --wf-ease:          cubic-bezier(0.22, 0.9, 0.28, 1);
  --wf-shadow:        0 18px 50px rgba(0, 0, 0, 0.45);
}

/* Base reset for Workforce surfaces */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wf-bg);
  color: var(--wf-text);
  font-family: var(--wf-font-body);
  line-height: 1.6;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--wf-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Logo mark container — fixed 40x40 so any pick drops in with zero rework.
   The SVG inherits --wf-accent via currentColor unless it carries its own. */
.wf-logo-mark {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wf-accent);
  flex: 0 0 auto;
}
.wf-logo-mark svg { width: 100%; height: 100%; }
.wf-logo-mark img { width: 40px; height: 40px; border-radius: 10px; display: block; }

/* Shared buttons */
.wf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 0;
  font-family: var(--wf-font-display);
  font-weight: 700; font-size: 1rem;
  cursor: pointer;
  transition: transform 0.15s var(--wf-ease), box-shadow 0.15s var(--wf-ease);
}
.wf-btn-primary {
  background: linear-gradient(135deg, var(--wf-accent), var(--wf-accent-deep));
  color: #04120a;
  box-shadow: 0 8px 28px rgba(62, 240, 138, 0.28);
}
.wf-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(62, 240, 138, 0.36); }
.wf-btn-ghost {
  background: transparent; color: var(--wf-text);
  border: 1px solid var(--wf-line);
}
.wf-btn-ghost:hover { border-color: var(--wf-accent); }
.wf-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Shared card */
.wf-card {
  background: var(--wf-bg-soft);
  border: 1px solid var(--wf-line-soft);
  border-radius: var(--wf-radius);
  padding: 24px;
}

.wf-kicker {
  font-family: var(--wf-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wf-accent);
}

.wf-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }