/* ============================================================
   Move Your Money — Design Tokens
   Premium navy + silver. Cero saturación.
   ============================================================ */

:root {
  /* === Surface (navy depth) === */
  --bg-base: #0a0e1a;
  --bg-elevated: #11162a;
  --bg-card: #161a31;
  --bg-overlay: rgba(10, 14, 26, 0.85);

  /* === Borders + dividers (silver low-alpha) === */
  --silver-line: rgba(208, 212, 224, 0.12);
  --silver-line-hover: rgba(208, 212, 224, 0.22);
  --silver-divider: rgba(208, 212, 224, 0.06);

  /* === Text === */
  --text-bright: #f5f6f8;
  --text: #d0d4e0;
  --text-muted: #8a8f9f;
  --text-faint: #5b6072;

  /* === Accent silver (premium metallic) === */
  --silver: #c0c5d4;
  --silver-bright: #e3e6ee;
  --silver-shadow: rgba(192, 197, 212, 0.18);

  /* === Sentiment (uso parsimonioso) === */
  --positive: #67a37a;
  --negative: #c7615e;
  --warning: #d4a574;

  /* === Gradients atmosféricos === */
  --gradient-hero: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(192, 197, 212, 0.10), transparent 70%);
  --gradient-mesh: radial-gradient(circle at 20% 0%, rgba(192, 197, 212, 0.08) 0%, transparent 50%),
                   radial-gradient(circle at 80% 30%, rgba(99, 117, 154, 0.06) 0%, transparent 50%),
                   radial-gradient(circle at 50% 100%, rgba(192, 197, 212, 0.04) 0%, transparent 50%);

  /* === Typography === */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* === Type scale (fluid clamp) === */
  --text-xs:    clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --text-sm:    clamp(0.84rem, 0.82rem + 0.1vw, 0.92rem);
  --text-base:  clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --text-lg:    clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --text-xl:    clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  --text-2xl:   clamp(1.85rem, 1.5rem + 1.4vw, 2.6rem);
  --text-3xl:   clamp(2.4rem, 1.8rem + 2.4vw, 3.8rem);
  --text-display: clamp(3rem, 2rem + 4vw, 6rem);

  /* === Spacing rhythm (no uniforme — editorial) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-section: clamp(5rem, 4rem + 5vw, 9rem);

  /* === Radii === */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* === Shadows (atmosphere) === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 60px rgba(192, 197, 212, 0.06);

  /* === Motion === */
  --duration-fast: 150ms;
  --duration: 280ms;
  --duration-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Layout === */
  --container: 1200px;
  --container-narrow: 880px;
}