/* GO BEST SEO plan identity (owner, 2026-10-03): PRO is a special glowing green, EXTRA is a beautiful gold, the trial is a quiet outline.
   Source of the values and the contrast ratios: docs/design/brand/brand.tokens.json ("plans") and BRAND.md. Use these classes for every plan badge, plan card and plan chip
   (marketing pricing, the app plan page and header chip, the admin customer list) so the two plans look the same everywhere.
   RULES: the neon green and the gold are FILLS, GLOWS and BORDERS. As TEXT on a light surface use --plan-*-text; the pure neon has 1.3:1 against the light background.
   Text placed ON a plan fill is always --plan-*-ink (11.9:1 on the neon, 8.9:1 on the gold). A plan is never shown by colour alone: the badge always carries the plan name. */
:root {
  --plan-pro-neon-hi: #7BFFB4;
  --plan-pro-neon: #39F58A;
  --plan-pro-neon-lo: #17C96A;
  --plan-pro-ink: #052014;
  --plan-pro-text: #0B7A43;
  --plan-pro-glow: rgba(57, 245, 138, 0.38);
  --plan-extra-gold-hi: #FFE29A;
  --plan-extra-gold: #E8B923;
  --plan-extra-gold-lo: #B8860B;
  --plan-extra-ink: #2A1D00;
  --plan-extra-text: #8A6100;
  --plan-extra-glow: rgba(232, 185, 35, 0.34);
  --plan-trial-text: #1A6FA3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --plan-pro-text: #39F58A;
    --plan-pro-glow: rgba(57, 245, 138, 0.5);
    --plan-extra-text: #E8B923;
    --plan-extra-glow: rgba(232, 185, 35, 0.44);
    --plan-trial-text: #7CCBF2;
  }
}
:root[data-theme="dark"] {
  --plan-pro-text: #39F58A;
  --plan-pro-glow: rgba(57, 245, 138, 0.5);
  --plan-extra-text: #E8B923;
  --plan-extra-glow: rgba(232, 185, 35, 0.44);
  --plan-trial-text: #7CCBF2;
}

/* ---- badge / chip ---- */
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding-block: 0.2em;
  padding-inline: 0.75em;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan-badge--pro {
  background: linear-gradient(135deg, var(--plan-pro-neon-hi), var(--plan-pro-neon) 55%, var(--plan-pro-neon-lo));
  color: var(--plan-pro-ink);
  box-shadow: inset 0 0 0 1px rgba(5, 32, 20, 0.14), 0 0 18px var(--plan-pro-glow);
}
.plan-badge--extra {
  background: linear-gradient(135deg, var(--plan-extra-gold-hi), var(--plan-extra-gold) 50%, var(--plan-extra-gold-lo));
  color: var(--plan-extra-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(42, 29, 0, 0.16), 0 0 16px var(--plan-extra-glow);
}
.plan-badge--trial {
  background: transparent;
  color: var(--plan-trial-text);
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* ---- name text ---- */
.plan-name--pro { color: var(--plan-pro-text); }
.plan-name--extra { color: var(--plan-extra-text); }
.plan-name--trial { color: var(--plan-trial-text); }

/* ---- card (marketing pricing, app plan page) ---- */
.plan-card {
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--line, #CADBD0);
  background: var(--surface, #FFFFFF);
  color: var(--ink, #0F2A20);
  padding: 24px;
}
.plan-card--pro {
  border-color: var(--plan-pro-neon);
  background-image: radial-gradient(120% 70% at 50% -12%, rgba(57, 245, 138, 0.16), transparent 62%);
  box-shadow: 0 0 0 1px var(--plan-pro-glow), 0 14px 44px -10px var(--plan-pro-glow);
}
.plan-card--extra {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface, #FFFFFF), var(--surface, #FFFFFF)) padding-box,
    linear-gradient(135deg, var(--plan-extra-gold-hi), var(--plan-extra-gold) 45%, var(--plan-extra-gold-lo)) border-box;
  box-shadow: 0 14px 44px -12px var(--plan-extra-glow);
}

/* ---- restrained motion: a slow breathing glow on Pro, one sheen sweep on Extra on hover/focus; static for reduced motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .plan-badge--pro, .plan-card--pro { animation: plan-breathe 5s ease-in-out infinite; }
  .plan-badge--extra { background-size: 220% 100%; transition: background-position 0.9s ease; }
  .plan-badge--extra:hover, .plan-card--extra:hover .plan-badge--extra, .plan-badge--extra:focus-visible { background-position: 100% 0; }
}
@keyframes plan-breathe {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 10px var(--plan-pro-glow)); }
}

/* ---- accessibility fallbacks ---- */
@media (forced-colors: active) {
  .plan-badge { border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  .plan-card--pro, .plan-card--extra { border: 2px solid CanvasText; background: Canvas; box-shadow: none; }
}