/*
 * Pricing Table - Design Tokens
 *
 * Note: Tokens are consumed by `.pt-*` stylesheets (renamed from `.bf-*`).
 */
:root {
  /* Type + brand */
  --font-family-primary: 'Uniform', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
  --shapescale-dark-100: #2c2c2c;
  --shapescale-teal: #72c7c5;
  --shape-dark-blue: #5c81ff;

  /* Surfaces, text, borders (light values; dark-mode overrides below) */
  --accent: var(--shape-dark-blue);
  --accent-soft: #eff4ff;
  --accent-alpha-10: rgb(92 129 255 / 10%);
  --accent-alpha-20: rgb(92 129 255 / 20%);
  --accent-alpha-30: rgb(92 129 255 / 30%);
  --accent-alpha-40: rgb(92 129 255 / 40%);
  --bg: #fff;
  --surface: rgb(255 255 255 / 85%);
  --surface-elevated: #fff;
  --text: #333;
  --text-secondary: #666;
  --border: rgb(0 0 0 / 8%);
  --shadow: 0 10px 30px -10px rgb(0 0 0 / 8%);
  --shadow-hover: 0 20px 40px -10px rgb(0 0 0 / 12%);

  /* Spacing + radii */
  --spacing-1: 0.5rem;
  --spacing-2: 1rem;
  --spacing-3: 1.5rem;
  --spacing-4: 2rem;
  --spacing-5: 2.5rem;
  --spacing-6: 3rem;
  --radius-card: 16px;
  --radius-input: 25px;
  --radius-cta: 50px;
  --radius-badge: 8px;

  /* Pricing table palette */
  --pt-primary: #5c81ff;
  --pt-accent: #72c7c5;
  --pt-bg: #fff;
  --pt-text: #111827;
  --pt-text-secondary: #4b5563;
  --pt-border: #e5e7eb;
  --pt-muted: #f7f8fb;
  --pt-success: #10b981;
  --pt-warning: #f59e0b;
  --pt-danger: #ef4444;
  --pt-radius-card: 18px;
  --pt-radius-pill: 999px;
  --pt-transition-fast: 150ms ease;
  --pt-transition-med: 220ms ease;

  /* Modal-specific tokens */
  --pt-modal-bg-dark: #1a1a2e;
  --pt-modal-text-white: #fff;
  --pt-modal-text-muted: rgb(255 255 255 / 70%);
  --pt-modal-error-light: #fca5a5;
  --pt-modal-overlay-light: rgb(255 255 255 / 15%);
  --pt-modal-overlay-border: rgb(255 255 255 / 25%);
  --pt-modal-gradient-dark: rgb(18 18 30 / 85%);
  --pt-modal-gradient-mid: rgb(18 18 30 / 70%);
  --pt-modal-gradient-light: rgb(18 18 30 / 50%);

  /* Campaign palette
   *
   * Value-preserving aliases for the accent colors used by the pricing-table rules.
   * Each maps to a single literal and is never re-declared in the dark-mode block, so a
   * rule that used a literal keeps rendering the identical color in both schemes. */
  --pt-white: #fff;
  --pt-black: #000;
  --pt-gold: #ffd700;
  --pt-gold-bright: #ffd54f;
  --pt-gold-soft: #ffb347;
  --pt-fire: #ff6b35;
  --pt-amber: #ffa500;
  --pt-amber-deep: #d97706;
  --pt-amber-bright: #ffc107;
  --pt-orange: #ff8c00;
  --pt-orange-deep: #f57c00;
  --pt-orange-soft: #ffb74d;
  --pt-orange-vivid: #f97316;
  --pt-brown: #7c2d12;
  --pt-blue-soft: #9ac7ff;
  --pt-blue-bright: #2f5bff;
  --pt-blue-mid: #6b8dff;
  --pt-blue-light: #7aa0ff;
  --pt-blue-violet: #6b90ff;
  --pt-aqua-soft: #8fe3dc;
  --pt-aqua-light: #8eece9;
  --pt-aqua: #85d4d2;

  /* Dark-mode surfaces and text (literals the component rules used directly) */
  --pt-dark-bg: #121212;
  --pt-dark-elevated: #404040;
  --pt-dark-text: #e0e0e0;
  --pt-dark-text-soft: #e5e7eb;
  --pt-gray-500: #6b7280;
  --pt-muted-soft: #a0a0a0;
  --pt-muted-alt: #9ca3af;
  --pt-ink: #0b1120;
  --pt-ink-800: #0f172a;
  --pt-ink-700: #1e293b;
  --pt-ink-600: #1e3a5f;
  --pt-slate: #475569;
}

/* Dark mode token overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --surface: rgb(255 255 255 / 5%);
    --surface-elevated: rgb(255 255 255 / 8%);
    --text: #e0e0e0;
    --text-secondary: #a0a0a0;
    --border: rgb(255 255 255 / 12%);
    --shadow: 0 12px 40px -12px rgb(0 0 0 / 65%);
    --shadow-hover: 0 16px 48px -12px rgb(0 0 0 / 75%);
    --pt-bg: #121212;
    --pt-text: #e0e0e0;
    --pt-text-secondary: #a0a0a0;
    --pt-border: rgb(255 255 255 / 12%);
    --pt-muted: rgb(255 255 255 / 6%);
    --pt-primary: #7a9aff;
    --pt-accent: #72c7c5;
  }
}