/* ============================================================
   TRIMBOLI FINANCE — Design Tokens
   All brand values live here. To rebrand: edit this file only.
   ============================================================ */

:root {
  /* ── Brand colours ── */
  --color-navy:          #1b2c41;   /* exact value from Canva dropper */
  --color-navy-mid:      #223450;   /* slightly lighter for card contrast */
  --color-navy-card:     #263d5c;   /* stat cards, icon bg on dark */
  --color-gold:          #c9a84c;   /* primary accent — CTA buttons, labels, links */
  --color-gold-hover:    #b8943d;   /* gold on hover */
  --color-cream:         #f5f0e8;   /* services / lender panel / testimonials bg */
  --color-white:         #ffffff;
  --color-bg-section:    #f9f8f5;   /* near-white for alternating sections */

  /* ── Text ── */
  --color-text-dark:     #0d1f2d;
  --color-text-body:     #4a5568;
  --color-text-muted:    #718096;
  --color-text-light:    #ffffff;
  --color-text-dim:      rgba(255, 255, 255, 0.65);
  --color-text-gold:     #c9a84c;

  /* ── Borders ── */
  --color-border-cream:  #e2dbd0;
  --color-border-dark:   rgba(255, 255, 255, 0.08);
  --color-border-white:  rgba(255, 255, 255, 0.15);

  /* ── Typography ── */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Type scale ── */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  1.875rem;   /*  30px */
  --text-4xl:  2.25rem;    /*  36px */
  --text-5xl:  3rem;       /*  48px */
  --text-6xl:  3.75rem;    /*  60px */

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Layout ── */
  --container-max:    1320px;
  --container-narrow: 760px;

  /* ── Radii ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 4px  rgba(13, 31, 45, 0.06);
  --shadow-md:   0 4px 16px rgba(13, 31, 45, 0.10);
  --shadow-lg:   0 8px 32px rgba(13, 31, 45, 0.14);
  --shadow-xl:   0 16px 56px rgba(13, 31, 45, 0.18);

  /* ── Transitions ── */
  --transition-fast: 140ms ease;
  --transition-base: 240ms ease;
  --transition-slow: 380ms ease;

  /* ── Z-index ── */
  --z-nav:    100;
  --z-modal:  300;
}