/* SPO theme — aligned with LINK / SPAGS tokens */

html.spo-app {
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --text: var(--ink);
  --text-muted: var(--muted);
  --border: var(--line);
  --primary: var(--blue);
  --warning: #fbbf24;
  --danger: #ef4444;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
}

html.spo-app[data-theme="light"] {
  color-scheme: light;
  --blue: #2563eb;
  --blue-soft: rgba(37, 99, 235, 0.1);
  --ink: #18181b;
  --muted: #71717a;
  --line: #e4e4e7;
  --bg: #fafafa;
  --surface: #fff;
  --surface-muted: #f4f4f5;
  --panel-border: #e4e4e7;
  --success-bg: #ecfdf5;
  --success-ink: #047857;
  --warn-bg: #fffbeb;
  --warn-ink: #b45309;
  --error-bg: #fef2f2;
  --error-ink: #b91c1c;
}

html.spo-app[data-theme="dark"] {
  color-scheme: dark;
  --blue: #3b82f6;
  --blue-soft: rgba(59, 130, 246, 0.1);
  --ink: #e8ecf4;
  --muted: #9aa3b2;
  --line: #2a3142;
  --bg: #151a23;
  --surface: #151a23;
  --surface-muted: #1e2432;
  --panel-border: #2a3142;
  --success-bg: rgba(6, 78, 59, 0.35);
  --success-ink: #4ade80;
  --warn-bg: rgba(120, 53, 15, 0.35);
  --warn-ink: #fbbf24;
  --error-bg: rgba(127, 29, 29, 0.35);
  --error-ink: #fca5a5;
}

html.spo-app .bg-grid {
  display: none;
}

html.spo-app .topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

html.spo-app .badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 4px 8px;
  border-radius: 999px;
}

html.spo-app .spo-auth-gate {
  max-width: 420px;
  margin: 12vh auto;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
}

html.spo-app .spo-auth-gate h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 8px;
}

html.spo-app .spo-auth-gate p {
  color: var(--muted);
  margin: 0 0 20px;
}