/* Public site design tokens (C2 Cyber direction).
 * Scoped under .public-theme so tokens never leak into community-side or
 * the existing homepage. Activated only on pages that opt in.
 * Source: docs/superpowers/specs/2026-05-28-front-of-site-rework-design.md §3 */

.public-theme {
  /* Surfaces */
  --pt-surface: #04060e;
  --pt-panel: #06070b;
  --pt-panel-2: rgba(255, 255, 255, 0.03);
  --pt-border: #1a1f2b;
  --pt-border-soft: rgba(255, 255, 255, 0.06);
  --pt-border-softer: rgba(255, 255, 255, 0.12);

  /* Accents */
  --pt-cyan: #22d3ee;
  --pt-magenta: #d946ef;
  --pt-lime: #a3e635;
  --pt-coral: #fb7185;
  --pt-violet: #a855f7;
  --pt-amber: #fbbf24;

  /* Text */
  --pt-text: #ffffff;
  --pt-text-dim: #cbd5e1;
  --pt-text-muted: #94a3b8;
  --pt-text-faint: #64748b;

  /* Gradients */
  --pt-grad-cta: linear-gradient(90deg, var(--pt-cyan), var(--pt-magenta));
  --pt-grad-text: linear-gradient(90deg, #ffffff 0%, var(--pt-cyan) 50%, var(--pt-magenta) 100%);
  --pt-grad-hero-wash:
    radial-gradient(60% 50% at 0% 0%, rgba(34, 211, 238, 0.16) 0%, transparent 60%),
    radial-gradient(50% 60% at 100% 100%, rgba(217, 70, 239, 0.18) 0%, transparent 60%);

  /* Spacing & radius */
  --pt-radius-outer: 14px;
  --pt-radius-inner: 12px;
  --pt-radius-card: 10px;
  --pt-pad-panel: 22px;
  --pt-pad-panel-mobile: 16px;
  --pt-gap-section: 16px;

  /* Type scale */
  --pt-font-headline: 'Inter', system-ui, -apple-system, sans-serif;
  --pt-font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Pulses */
  --pt-pulse-duration: 1.6s;

  /* Background base on the theme root */
  background: var(--pt-surface);
  color: var(--pt-text);
  font-family: var(--pt-font-body);
}

.public-theme .pt-grad-text {
  background: var(--pt-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.public-theme .pt-eyebrow {
  font-size: 11px;
  color: var(--pt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}

@keyframes pt-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.25); }
}