/* Compa marketing redesign — tokens grounded in the real brand */
:root {
  /* Grounds */
  --ground-white: #faf8f4;
  --ground-lavender: #ece3f5;
  --ground-lavender-soft: #f2eaf8;
  --ground-lavender-deep: #d9c7ec;
  --ground-theatre: #0e0b18;
  --ground-theatre-soft: #1a1328;

  /* Ink */
  --ink: #1a1225;
  --ink-soft: #5a4d6b;
  --ink-mute: #8b7d9a;
  --ink-on-dark: #f5eefa;
  --ink-on-dark-soft: #b8a9cc;

  /* Compa purple — the brand primary */
  --compa: #7C2FE8;
  --compa-deep: #5d1bbf;
  --compa-bright: #9340ff;
  --compa-soft: #d9c7ec;
  --compa-wash: #f2eaf8;

  /* Dancer accents (from the real product) */
  --accent-blue: #3b82f6;   /* Samantha Hales */
  --accent-green: #10b981;  /* Samantha Coomer */
  --accent-pink: #ec4899;
  --accent-orange: #f59e0b;
  --accent-yellow: #fbbf24;

  /* Swim (sport two) */
  --swim: #1e78b8;
  --swim-wash: #e8f1f9;

  /* Spacing */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
}

/* Italic wordmark — heavy sans, not serif, matching the real Compa! mark */
.ff-wordmark {
  font-family: "Fraunces", "Host Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.025em;
}
/* Display & body type */
.ff-display { font-family: "Host Grotesk", "Inter Tight", -apple-system, "Helvetica Neue", sans-serif; font-weight: 700; letter-spacing: -0.025em; }
.ff-sans { font-family: "Host Grotesk", "Inter Tight", -apple-system, "Helvetica Neue", sans-serif; }
.ff-mono { font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; }

/* The signature Compa gradient blob — radial, multi-hue */
.compa-blob {
  background: radial-gradient(
    circle at 30% 30%,
    #fbbf24 0%,
    #ec4899 22%,
    #9340ff 52%,
    rgba(147, 64, 255, 0) 70%
  );
  filter: blur(18px);
  opacity: 0.95;
}

/* Soft purple-to-white card gradient used in watch party */
.card-grad-purple {
  background: linear-gradient(180deg, #faf6ff 0%, #f2e9fa 100%);
}

/* Striped monospace placeholder (fallback for imagery I don't have) */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(26,18,37,0.04) 0 8px, rgba(26,18,37,0.08) 8px 16px),
    #ece3f5;
  color: var(--ink-soft);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center;
  text-transform: lowercase; overflow: hidden;
}
.ph--dark {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 8px, rgba(255,255,255,0.08) 8px 16px),
    #1a1328;
  color: var(--ink-on-dark-soft);
}