/* =========================================================================
   Money.com — Best Budgeting Apps (Quicken) — REDESIGN v2 Tokens
   Goals: above-the-fold #1 CTA, stronger trust signals, modern editorial feel
   ========================================================================= */

:root {
  /* ---------- Brand / Money.com palette ---------- */
  --color-bg-page:            #FFFFFF;
  --color-bg-surface:         #FFFFFF;
  --color-bg-soft:            #F4F7FB;   /* card lattice / table dividers */
  --color-bg-hero:            #F7F4EE;   /* warm cream hero band */
  --color-bg-hero-accent:     #FFF7E6;   /* highlight stripe under #1 */
  --color-bg-tag-blue:        #ECEFFF;
  --color-bg-tag-green:       #E7F6EC;
  --color-bg-tag-red:         #FDECEA;

  /* Text */
  --color-text-primary:       #00003C;   /* Money navy headings */
  --color-text-heading:       #0C3D56;
  --color-text-body:          #1F2937;
  --color-text-muted:         #4B5563;
  --color-text-meta:          #6B7280;
  --color-text-soft:          #9CA3AF;

  /* Accents */
  --color-accent-blue:        #3650DB;
  --color-accent-blue-dark:   #2737A8;
  --color-accent-orange:      #FF7106;   /* PRIMARY CTA */
  --color-accent-orange-hover:#FF6321;
  --color-accent-orange-tint: #FFEBE0;
  --color-accent-gold:        #E0A93B;
  --color-accent-green:       #1BBA5D;
  --color-accent-red:         #DC2626;
  --color-accent-purple:      #64379F;

  /* Borders */
  --color-border-soft:        #E5E7EB;
  --color-border-card:        #D8DEE7;
  --color-border-divider:     #E5E7EB;

  /* Footer */
  --color-footer-bg:          #0B1320;
  --color-footer-text:        #B8C0CC;
  --color-footer-link:        #FFFFFF;

  /* ---------- Typography ---------- */
  --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (rem-based, 1rem = 16px) */
  --fs-display:     2.25rem;   /* 36px — hero */
  --fs-display-md:  1.75rem;   /* 28px */
  --fs-h1:          1.75rem;
  --fs-h2:          1.5rem;    /* 24px */
  --fs-h3:          1.25rem;   /* 20px */
  --fs-h4:          1.0625rem; /* 17px */
  --fs-body:        1rem;
  --fs-body-sm:     0.875rem;  /* 14px */
  --fs-meta:        0.8125rem; /* 13px */
  --fs-fine:        0.75rem;   /* 12px */

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

  /* ---------- Spacing (4-pt scale) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Radius ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------- Shadow ---------- */
  --shadow-card:    0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-card-hi: 0 4px 6px rgba(15, 23, 42, 0.08), 0 16px 40px rgba(15, 23, 42, 0.12);
  --shadow-popover: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-nav:     0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-sticky:  0 -2px 12px rgba(0, 0, 0, 0.12);

  /* ---------- Layout ---------- */
  --container-narrow: 760px;
  --container-mid:    920px;
  --container-wide:   1100px;
  --container-pad:    16px;
  --navbar-h:         64px;
  --stickybar-h:      72px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 150ms;
  --t-med:  240ms;
}

/* ============== Component primitives ============== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm);
  line-height: 1;
  padding: 14px 22px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--color-accent-orange);
  color: #FFFFFF !important;
  border-color: var(--color-accent-orange);
}
.btn-primary:hover { background: var(--color-accent-orange-hover); border-color: var(--color-accent-orange-hover); }

.btn-secondary {
  background: #FFFFFF;
  color: var(--color-accent-orange) !important;
  border-color: var(--color-accent-orange);
}
.btn-secondary:hover { background: var(--color-accent-orange-tint); }

.btn-block { width: 100%; }
.btn-lg    { padding: 16px 28px; font-size: var(--fs-body); }

/* Pill chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-fine);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.chip-blue   { background: var(--color-bg-tag-blue);  color: var(--color-accent-blue-dark); }
.chip-green  { background: var(--color-bg-tag-green); color: #166534; }
.chip-gold   { background: #FFF4D6; color: #8C6C37; }
.chip-orange { background: var(--color-accent-orange-tint); color: var(--color-accent-orange-hover); }