/* ═══════════════════════════════════════════════
   MakeMoneyMarkets — Shared Visual Effects
   OPTIMIZED: GPU-accelerated, minimal paint
   Includes: Design tokens, text rendering, interactions
   ═══════════════════════════════════════════════ */

/* ── DESIGN TOKENS (standardize the entire system) ── */
:root {
  /* Spacing scale: 4/8/12/16/24/32/48/64 */
  --mmm-space-xs: 4px;
  --mmm-space-sm: 8px;
  --mmm-space-md: 12px;
  --mmm-space-base: 16px;
  --mmm-space-lg: 24px;
  --mmm-space-xl: 32px;
  --mmm-space-2xl: 48px;
  --mmm-space-3xl: 64px;

  /* Border radius: 3 sizes only */
  --mmm-radius-card: 12px;
  --mmm-radius-btn: 8px;
  --mmm-radius-badge: 20px;

  /* Hover: ONE standard for all surfaces */
  --mmm-lift: -3px;
  --mmm-shadow-hover: 0 8px 24px rgba(44, 31, 21, 0.08);
  --mmm-transition: 0.2s ease;

  /* Font sizes: 4 levels + caption */
  --mmm-text-hero: 40px;
  --mmm-text-heading: 18px;
  --mmm-text-body: 15px;
  --mmm-text-caption: 12px;
  --mmm-text-micro: 10px;
}
[data-theme="dark"] {
  --mmm-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ── Text Rendering ── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Smooth Scroll ── */
html { scroll-behavior: smooth; }

/* ── Branded Selection ── */
::selection { background: rgba(139, 105, 20, 0.2); color: var(--text); }
[data-theme="dark"] ::selection { background: rgba(232, 184, 48, 0.3); }

/* ── Focus: Accessible ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--mmm-radius-btn); }

/* ── Universal Hover Transitions ── */
/* Note: .mmm-trust-badge transition/hover is in styles.css (canonical source) */
a { transition: color var(--mmm-transition); }

/* ── FAQ Smooth ── */
details { transition: box-shadow var(--mmm-transition); border-radius: var(--mmm-radius-card); }
details[open] { box-shadow: 0 2px 8px rgba(61,46,34,0.05); }
[data-theme="dark"] details[open] { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
details summary { cursor: pointer; transition: color 0.15s ease; }
details summary:hover { color: var(--accent); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--mmm-radius-btn); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Tables ── */
table { border-radius: var(--mmm-radius-card); overflow: hidden; }

/* ── Mobile: Full-width CTAs + larger hero ── */
@media (max-width: 600px) {
  .mmm-cta, .cta-btn, [class*="cta-btn"] {
    display: block !important;
    width: 100% !important;
    text-align: center;
  }
  .hero h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}