/*
  Theme tokens — the single source of truth for color, type, spacing, and
  motion across the site.

  Brand colors, chosen fresh for this rebuild (previously the site had no
  real design system — colors were whatever Divi/WordPress defaults left
  behind):
    - Deep navy  #0b1e45  (primary — same "confident navy" foundation as
      the sibling LendStrm/PayStrm sites, keeping the three brands feeling
      related without being identical)
    - Current teal #0fb8a6  (accent, unique to LoanEddy — nods to the name:
      an "eddy" is a circular current. Reserved for icons, borders, the
      logo mark, and soft-tint fills; never used as white-on-teal text —
      at this saturation it fails WCAG AA as a text/button-label color)
    - Amber #f5a623 (sparing secondary accent for small badges/pills,
      always with navy text on top, never white)
  All combinations below are checked against WCAG AA (4.5:1 body text,
  3:1 large text / UI) before use — see the comments next to each token.
*/

:root {
  /* ---- Brand core ------------------------------------------------------ */
  --brand-navy: #0b1e45;
  --brand-navy-dark: #071530;
  --brand-navy-light: #1f3b75;
  --brand-teal: #0fb8a6;
  --brand-teal-dark: #0c9484;
  --brand-teal-soft: #e3faf5;
  --brand-amber: #f5a623;
  --brand-amber-soft: #fff3de;

  /* ---- Semantic tokens (components read these) ------------------------ */
  --color-primary: var(--brand-navy);
  --color-primary-hover: var(--brand-navy-dark);
  --color-primary-soft: #eef1f8;
  --color-primary-soft-border: #d9deec;

  /* Accent: 2.49:1 on white — decorative/large-bold only, never body text
     or a solid button label. Use --brand-teal-dark (3.76:1) for large
     bold headline accents; use --brand-teal-soft as a fill behind navy
     text for highlight spans and alternating section backgrounds. */
  --color-accent: var(--brand-teal);
  --color-accent-strong: var(--brand-teal-dark);
  --color-accent-soft: var(--brand-teal-soft);

  --color-highlight: var(--brand-amber);
  --color-highlight-soft: var(--brand-amber-soft);

  --color-ink: #151b2e;
  --color-text: #151b2e;
  --color-text-soft: #4a5578;
  --color-text-faint: #767c96;
  --color-text-on-dark: #f4f6fb;
  --color-text-on-dark-soft: #b9c1de;

  --color-bg: #ffffff;
  --color-bg-alt: #f6f8fb;
  --color-bg-ink: #0e1730;
  --color-bg-ink-alt: #16213e;
  --color-border: #e6e9f2;
  --color-hairline: #eef0f6;
  --color-border-on-dark: rgba(255, 255, 255, 0.14);
  --color-white: #ffffff;

  /* ---- Gradients & decorative washes ------------------------------------ */
  --gradient-cta: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
  --gradient-hero-line: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-teal) 100%);
  --glow-navy: radial-gradient(circle, rgba(11, 30, 69, 0.14) 0%, rgba(11, 30, 69, 0) 70%);
  --glow-teal: radial-gradient(circle, rgba(15, 184, 166, 0.18) 0%, rgba(15, 184, 166, 0) 70%);

  /* ---- Typography --------------------------------------------------------
     Plus Jakarta Sans for headings, Inter for body — the same pairing as
     LendStrm and PayStrm, so the three sibling sites share type DNA even
     as each keeps its own accent color. */
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;
  --tracking-tight: -0.03em;

  /* ---- Spacing scale ----------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --space-8: 5.5rem;
  --space-9: 8rem;

  /* ---- Shape / elevation -------------------------------------------------- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 30, 69, 0.05);
  --shadow-md: 0 12px 32px rgba(11, 30, 69, 0.07);
  --shadow-lg: 0 30px 80px rgba(11, 30, 69, 0.12);
  --shadow-glow-primary: 0 14px 32px rgba(11, 30, 69, 0.20);
  --shadow-glow-accent: 0 14px 32px rgba(15, 184, 166, 0.24);

  /* ---- Motion -------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 520ms;
  --stagger-step: 80ms;

  /* ---- Layout --------------------------------------------------------------- */
  --container-width: 1180px;
  --header-height: 76px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --stagger-step: 0ms;
  }
}