/* MoneySweep brand tokens — pulled from BRAND.md v1.0
   Single source of truth for colors, type, spacing.
   Do not create ad-hoc values in page CSS. */

:root {
  /* Cores primárias */
  --navy:           #1B2A4A;
  --trust-blue:     #2563EB;
  --action-green:   #16A34A;

  /* Cores de suporte */
  --premium-gold:   #D2A94E;
  --alert-red:      #DC2626;
  --slate-700:      #334155;
  --slate-600:      #475569;
  --slate-400:      #94A3B8;

  /* Backgrounds (Light mode default) */
  --page-bg:        #F8FAFC;
  --card-bg:        #FFFFFF;
  --surface:        #F1F5F9;
  --border:         #E2E8F0;
  --border-strong:  #CBD5E1;

  /* Tipografia */
  --font-display:   "DM Serif Display", Georgia, serif;
  --font-body:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing (multiplos de 4) */
  --space-xs:       4px;
  --space-sm:       8px;
  --space-md:       16px;
  --space-lg:       24px;
  --space-xl:       32px;
  --space-2xl:      48px;
  --space-3xl:      64px;
  --space-4xl:      96px;

  /* Border radius */
  --radius-sm:      6px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-xl:      16px;
  --radius-full:    9999px;

  /* Shadow */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:      0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:      0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05);

  /* Motion */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  150ms;
  --duration-base:  200ms;
}

/* Reset base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--slate-700); background: var(--page-bg); -webkit-font-smoothing: antialiased; line-height: 1.6; font-size: 16px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea { font: inherit; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } }