/* PhantomRed shared visual foundation
   Opt in with class="pr-foundation" on the body element. */

:root {
  color-scheme: dark;

  --pr-color-brand: #f0444f;
  --pr-color-brand-hover: #ff5963;
  --pr-color-brand-strong: #c92635;
  --pr-color-brand-soft: rgba(240, 68, 79, 0.1);
  --pr-color-brand-border: rgba(240, 68, 79, 0.3);

  --pr-canvas: #08090b;
  --pr-surface-1: #0d0f12;
  --pr-surface-2: #12151a;
  --pr-surface-3: #181c22;
  --pr-surface-raised: #1d222a;

  --pr-text-strong: #f3f5f7;
  --pr-text: #d5d9df;
  --pr-text-muted: #a2aab5;
  --pr-text-subtle: #737d8b;
  --pr-text-on-accent: #ffffff;

  --pr-border: #252a32;
  --pr-border-strong: #343b46;
  --pr-focus: #ff7a83;

  --pr-severity-critical: #ef5965;
  --pr-severity-high: #f08c55;
  --pr-severity-medium: #e0b34c;
  --pr-severity-low: #5c9fe8;
  --pr-severity-info: #8793a3;
  --pr-state-success: #55b889;
  --pr-state-warning: #d6a94d;
  --pr-state-error: #ec6973;

  --pr-space-1: 0.25rem;
  --pr-space-2: 0.5rem;
  --pr-space-3: 0.75rem;
  --pr-space-4: 1rem;
  --pr-space-5: 1.25rem;
  --pr-space-6: 1.5rem;
  --pr-space-8: 2rem;
  --pr-space-10: 2.5rem;
  --pr-space-12: 3rem;
  --pr-space-16: 4rem;
  --pr-space-20: 5rem;
  --pr-space-24: 6rem;

  --pr-radius-sm: 0.375rem;
  --pr-radius-md: 0.625rem;
  --pr-radius-lg: 0.875rem;
  --pr-radius-xl: 1.25rem;
  --pr-radius-pill: 999px;

  --pr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --pr-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.28);
  --pr-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.38);
  --pr-shadow-focus: 0 0 0 3px rgba(240, 68, 79, 0.22);

  --pr-container-sm: 42rem;
  --pr-container-md: 60rem;
  --pr-container-lg: 72rem;
  --pr-container-xl: 76rem;
  --pr-reading-width: 68ch;

  --pr-font-sans: "DM Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pr-font-display: "Syne", var(--pr-font-sans);
  --pr-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --pr-leading-tight: 1.08;
  --pr-leading-body: 1.65;
  --pr-duration-fast: 140ms;
  --pr-duration-normal: 220ms;
}

.pr-foundation {
  background: var(--pr-canvas);
  color: var(--pr-text);
  font-family: var(--pr-font-sans);
  line-height: var(--pr-leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.pr-foundation *,
.pr-foundation *::before,
.pr-foundation *::after { box-sizing: border-box; }

.pr-foundation h1,
.pr-foundation h2,
.pr-foundation h3,
.pr-foundation h4 { color: var(--pr-text-strong); }

.pr-foundation p { color: var(--pr-text-muted); }
.pr-foundation code,
.pr-foundation pre,
.pr-foundation kbd,
.pr-foundation .pr-mono { font-family: var(--pr-font-mono); }

.pr-container { width: min(100% - 2rem, var(--pr-container-lg)); margin-inline: auto; }
.pr-container--reading { max-width: var(--pr-reading-width); }

.pr-card {
  background: var(--pr-surface-1);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-lg);
  box-shadow: var(--pr-shadow-sm);
  padding: var(--pr-space-6);
}

.pr-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--pr-border-strong);
  border-radius: var(--pr-radius-pill);
  color: var(--pr-text-muted);
  background: var(--pr-surface-2);
  font-family: var(--pr-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.pr-btn,
.pr-foundation :where(button, [type="button"], [type="submit"], [role="button"]) {
  min-height: 2.75rem;
  border-radius: var(--pr-radius-md);
  font-family: var(--pr-font-sans);
}

.pr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pr-space-2);
  padding: 0.65rem 1.125rem;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--pr-duration-fast), border-color var(--pr-duration-fast), color var(--pr-duration-fast), transform var(--pr-duration-fast);
}

.pr-btn--primary { background: var(--pr-color-brand-strong); color: var(--pr-text-on-accent); }
.pr-btn--primary:hover { background: #d93240; }
.pr-btn--secondary { background: var(--pr-surface-2); border-color: var(--pr-border-strong); color: var(--pr-text); }
.pr-btn--secondary:hover { background: var(--pr-surface-3); border-color: #48515f; color: var(--pr-text-strong); }
.pr-btn--ghost { background: transparent; border-color: var(--pr-border); color: var(--pr-text-muted); }
.pr-btn--ghost:hover { border-color: var(--pr-border-strong); color: var(--pr-text-strong); }

.pr-field,
.pr-foundation :where(input, select, textarea) {
  min-height: 2.75rem;
  border: 1px solid var(--pr-border-strong);
  border-radius: var(--pr-radius-md);
  background: var(--pr-surface-1);
  color: var(--pr-text-strong);
  font-family: var(--pr-font-sans);
}

.pr-field { width: 100%; padding: 0.6875rem 0.875rem; font-size: 0.9375rem; }
.pr-foundation :where(input, textarea)::placeholder { color: var(--pr-text-subtle); opacity: 1; }
.pr-label { display: block; margin-bottom: var(--pr-space-2); color: var(--pr-text-muted); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; }

.pr-foundation :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pr-focus);
  outline-offset: 3px;
  box-shadow: var(--pr-shadow-focus);
}

.pr-foundation :where(button, input, select, textarea):disabled { cursor: not-allowed; opacity: 0.58; }

.pr-state {
  padding: var(--pr-space-3) var(--pr-space-4);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-radius-md);
  background: var(--pr-surface-1);
  color: var(--pr-text);
  font-size: 0.875rem;
}
.pr-state--loading { border-color: rgba(92, 159, 232, 0.35); }
.pr-state--success { border-color: rgba(85, 184, 137, 0.38); color: #91d7b5; }
.pr-state--warning { border-color: rgba(214, 169, 77, 0.4); color: #e5c67e; }
.pr-state--error { border-color: rgba(236, 105, 115, 0.4); color: #f1a0a7; }

.pr-nav {
  background: rgba(8, 9, 11, 0.9);
  border-bottom: 1px solid var(--pr-border);
  box-shadow: var(--pr-shadow-sm);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.pr-nav a { color: var(--pr-text-muted); }
.pr-nav a:hover { color: var(--pr-text-strong); }

.pr-footer { border-top: 1px solid var(--pr-border); background: var(--pr-canvas); color: var(--pr-text-subtle); }
.pr-footer a { color: var(--pr-text-muted); }
.pr-footer a:hover { color: var(--pr-text-strong); }

.pr-skeleton {
  border-radius: var(--pr-radius-sm);
  background: linear-gradient(90deg, var(--pr-surface-2) 25%, var(--pr-surface-3) 50%, var(--pr-surface-2) 75%);
  background-size: 200% 100%;
  animation: pr-shimmer 1.5s ease-in-out infinite;
}
@keyframes pr-shimmer { to { background-position-x: -200%; } }

/* Compatibility aliases for pages as they move to the foundation. */
.pr-foundation {
  --red: var(--pr-color-brand);
  --red2: var(--pr-color-brand-hover);
  --red-dim: var(--pr-color-brand-soft);
  --red-glow: rgba(240, 68, 79, 0.2);
  --bg: var(--pr-canvas);
  --bg2: var(--pr-surface-1);
  --bg3: var(--pr-surface-2);
  --bg4: var(--pr-surface-3);
  --bg5: var(--pr-surface-raised);
  --border: var(--pr-border);
  --border2: var(--pr-border-strong);
  --text: var(--pr-text-strong);
  --text2: var(--pr-text-muted);
  --text3: var(--pr-text-subtle);
  --green: var(--pr-state-success);
  --yellow: var(--pr-state-warning);
  --blue: var(--pr-severity-low);
}

/* Phase 1 validation adapters. */
.pr-foundation .nav-logo,
.pr-foundation .auth-brand-icon { background: var(--pr-color-brand-strong); box-shadow: none; }
.pr-foundation .btn-primary,
.pr-foundation .btn-hero,
.pr-foundation .btn-cta,
.pr-foundation .btn-auth,
.pr-foundation .btn-plan-red,
.pr-foundation .nav-cta { background: var(--pr-color-brand-strong); color: #fff; box-shadow: var(--pr-shadow-sm); font-family: var(--pr-font-sans); }
.pr-foundation .btn-primary:hover,
.pr-foundation .btn-hero:hover,
.pr-foundation .btn-cta:hover,
.pr-foundation .btn-auth:hover,
.pr-foundation .btn-plan-red:hover,
.pr-foundation .nav-cta:hover { background: #d93240; box-shadow: var(--pr-shadow-sm); transform: translateY(-1px); }
.pr-foundation .btn-ghost,
.pr-foundation .btn-hero-ghost,
.pr-foundation .btn-secondary { background: var(--pr-surface-1); border-color: var(--pr-border-strong); color: var(--pr-text); box-shadow: none; }
.pr-foundation :where(.how-card, .feat-card, .price-card, .split-card, .faq-item, .related-card) { box-shadow: var(--pr-shadow-sm); }
.pr-foundation :where(.hero-sub, .section-desc, .how-desc, .feat-desc, .price-desc) { color: var(--pr-text-muted); }
.pr-foundation :where(.hero-note, .logos-label, .term-title-text) { color: var(--pr-text-subtle); }
.pr-foundation .hero-title .line-dim { color: var(--pr-text-muted); opacity: 0.62; }
.pr-foundation .hero::before { opacity: 0.55; }

@media (max-width: 48rem) {
  .pr-container { width: min(100% - 1.5rem, var(--pr-container-lg)); }
  .pr-btn { width: auto; min-height: 2.875rem; }
}

@media (max-width: 30rem) {
  .pr-container { width: min(100% - 1rem, var(--pr-container-lg)); }
  .pr-foundation .hero-title { font-size: clamp(2.25rem, 12.5vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .pr-foundation,
  .pr-foundation * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}