/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — the single source of truth for colour.
   Theme: clean white base + blue gradient accent system.

   The primary blue is derived from the Malindo Finance logo:
   the wordmark and bar-chart mark sample as #001A53, which is
   locked in below as --brand-blue-900. The rest of the ramp is
   built on that hue (~221°) and contrast-checked against white.

   Do not hardcode hex values anywhere else in the stylesheets.
═══════════════════════════════════════════════════════ */
:root {
  /* ── Brand blue ramp ──────────────────────────────────
     Contrast vs #FFF (WCAG AA needs 4.5:1 for body text):
       900 16.50:1   800 12.85:1   700 9.62:1   600 6.67:1
       500  4.42:1 — large text / decorative only
       400 and lighter — backgrounds, borders, gradient tails  */
  --brand-blue-900: #001A53;   /* logo navy — headings, footer, dark sections */
  --brand-blue-800: #062B7A;
  --brand-blue-700: #0B3E9C;
  --brand-blue-600: #1155C7;   /* PRIMARY — buttons, links, accents */
  --brand-blue-500: #2C74E6;
  --brand-blue-400: #5B96F0;
  --brand-blue-300: #93BAF7;   /* gradient tails, accents on dark */
  --brand-blue-200: #C2D8FB;
  --brand-blue-100: #DEEAFD;   /* pale accent tiles */
  --brand-blue-50:  #F1F6FE;   /* section backgrounds */

  /* RGB triplets, for rgba() with a variable alpha */
  --brand-blue-900-rgb: 0,26,83;
  --brand-blue-700-rgb: 11,62,156;
  --brand-blue-600-rgb: 17,85,199;
  --brand-blue-300-rgb: 147,186,247;

  /* ── Surfaces & text ── */
  --surface:       #FFFFFF;
  --surface-alt:   var(--brand-blue-50);
  --white:         #FFFFFF;
  --off-white:     #FCFDFF;
  --text:          #17202E;   /* 16.37:1 on white */
  --muted:         #5A6675;   /* 5.85:1 on white  */

  /* ── Neutral ramp (cooled to sit with the blue) ── */
  --gray-50:  #F7F9FC;
  --gray-100: #F0F4F9;
  --gray-150: #E9EFF6;
  --gray-200: #DFE7F0;
  --gray-300: #C3CEDD;
  --gray-400: #94A2B5;
  --gray-500: #74879B;
  --gray-600: #4E5F73;
  --gray-700: #34455A;
  --gray-800: #17202E;

  /* ── Gradients — used with restraint: hero, primary CTAs,
        section dividers, card hover, icon tiles. Never behind
        body copy. ── */
  /* Ends at blue-600, not blue-500: white text on these fills must stay
     >= 4.5:1, and white on blue-500 is only 4.42:1. */
  --grad-primary:  linear-gradient(135deg, var(--brand-blue-800) 0%, var(--brand-blue-600) 100%);
  --grad-primary-hover: linear-gradient(135deg, var(--brand-blue-900) 0%, var(--brand-blue-700) 100%);
  /* Dark panels carry translucent white text, so the lightest stop stays
     at blue-800: white@55% clears 4.5:1 there but only reaches 3.1:1
     against blue-600. */
  --grad-deep:     linear-gradient(160deg, var(--brand-blue-900) 0%, var(--brand-blue-800) 100%);
  --grad-surface:  linear-gradient(180deg, var(--white) 0%, var(--brand-blue-50) 100%);
  --grad-divider:  linear-gradient(90deg, var(--brand-blue-600), var(--brand-blue-300));
  --grad-icon:     linear-gradient(135deg, var(--brand-blue-100) 0%, var(--brand-blue-200) 100%);

  /* ── Shape & motion ── */
  --radius:    4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --shadow-xs: 0 1px 2px rgba(var(--brand-blue-900-rgb),0.05);
  --shadow-sm: 0 1px 3px rgba(var(--brand-blue-900-rgb),0.07), 0 1px 2px rgba(var(--brand-blue-900-rgb),0.04);
  --shadow-md: 0 4px 16px rgba(var(--brand-blue-900-rgb),0.08), 0 2px 4px rgba(var(--brand-blue-900-rgb),0.04);
  --shadow-lg: 0 12px 40px rgba(var(--brand-blue-900-rgb),0.10);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);

  /* ═══════════════════════════════════════════════════
     LEGACY ALIASES
     The original theme was navy + warm gold. Those names are
     still referenced throughout the stylesheets, so they are
     remapped onto the blue ramp here rather than find-replaced
     across ~1,900 lines. Prefer the --brand-* tokens above in
     any new code; these exist so the old rules recolour from
     this one file.
     ═══════════════════════════════════════════════════ */
  --navy:       var(--brand-blue-600);   /* was the primary — buttons, links, headings */
  --navy-dark:  var(--brand-blue-900);
  --navy-mid:   var(--brand-blue-700);
  --navy-soft:  var(--brand-blue-500);
  --gold:       var(--brand-blue-600);   /* accent role now carried by blue */
  --gold-light: var(--brand-blue-300);   /* accent on dark backgrounds */
  --gold-pale:  var(--brand-blue-100);   /* pale accent tiles */
  --cream:      var(--brand-blue-50);
  --text-body:  var(--text);
  --text-light: var(--muted);
  --text-muted: #68758A;   /* 4.67:1 on white — AA for normal text */
  --hairline:   #E3EAF3;
}