/* ==============================================
   THEME — Change these variables to re-skin
   ============================================== */

:root {
  /* Primary accent */
  --accent:         #7c3aed;
  --accent-dark:    #5b21b6;
  --accent-light:   #a78bfa;
  --accent-subtle:  rgba(124, 58, 237, .08);
  --accent-glow:    rgba(124, 58, 237, .25);

  /* Hero gradient text (left -> right) */
  --hero-grad-from: #7c3aed;
  --hero-grad-to:   #3b82f6;

  /* Background orbs */
  --orb-1: #a78bfa;
  --orb-2: #60a5fa;
  --orb-3: #f9a8d4;

  /* Page background */
  --bg:             #f8f7fe;

  /* Text */
  --text:           #1e1e2e;
  --text-secondary: #6b6b88;
  --text-muted:     #8888a8;
  --text-faint:     #a0a0b8;
  --text-ghost:     #b0b0c8;

  /* Surfaces (glass) */
  --glass-bg:       rgba(255, 255, 255, .5);
  --glass-border:   rgba(255, 255, 255, .7);
  --glass-blur:     16px;

  /* Mock lines (hero visual) */
  --mock-line:      var(--accent);

  /* Pricing card left side */
  --price-bg-from:  var(--accent);
  --price-bg-to:    var(--accent-light);

  /* Button radius (pill vs rounded) */
  --radius-pill:    50px;
  --radius-card:    20px;
  --radius-step:    12px;
}

/* Logo icon inherits accent */
.logo-icon path { fill: var(--accent); }