/* ============================================================
   COLOURS  —  Finance Family
   Five brand colours from Brand Guidelines V1.1, each with the
   10/20/40/60/80/100 tint ramp shown in the palette spread.
   Tints are the colour mixed toward white (e.g. 40 = 40% colour).
   ============================================================ */
:root {
  /* ---- Brand base (100%) ---- */
  --blue:   #0073FF;   /* Primary   — CMYK 100 55 0 0  / RGB 0 115 255 */
  --mint:   #00DEC2;   /* Secondary — CMYK 63 0 36 0   / RGB 0 222 194 */
  --navy:   #0F1418;   /* Dark/text — CMYK 77 68 63 79 / RGB 15 20 24  */
  --grey:   #F5F5F5;   /* Light surf— CMYK 3 2 2 0     / RGB 245 245 245*/
  --yellow: #FFBF24;   /* Accent    — CMYK 0 27 95 0   / RGB 255 191 39 */

  /* ---- Blue ramp ---- */
  --blue-10: #E5F1FF;
  --blue-20: #CCE3FF;
  --blue-40: #99C7FF;
  --blue-60: #66AAFF;
  --blue-80: #338EFF;
  --blue-100: #0073FF;
  --blue-shade: #005CCC;   /* hover/press — darker */
  --blue-deep:  #0048A0;

  /* ---- Mint ramp ---- */
  --mint-10: #E5FCF9;
  --mint-20: #CCF8F3;
  --mint-40: #99F2E7;
  --mint-60: #66EBDA;
  --mint-80: #33E5CE;
  --mint-100: #00DEC2;
  --mint-shade: #00B29B;

  /* ---- Navy ramp ---- */
  --navy-10: #E7E8E8;
  --navy-20: #CFD0D1;
  --navy-40: #9FA2A3;
  --navy-60: #6F7375;
  --navy-80: #3F4447;
  --navy-100: #0F1418;
  --navy-soft: #1C242A;   /* raised dark surface */

  /* ---- Grey ramp (neutrals over white) ---- */
  --grey-10: #FDFDFD;
  --grey-20: #FAFAFA;
  --grey-40: #F5F5F5;
  --grey-60: #EBEBEB;
  --grey-80: #DEDEDE;
  --grey-100: #CFCFCF;
  --grey-line: #E6E8EB;   /* hairline borders */

  /* ---- Yellow ramp ---- */
  --yellow-10: #FFF9E9;
  --yellow-20: #FFF2D3;
  --yellow-40: #FFE5A7;
  --yellow-60: #FFD87C;
  --yellow-80: #FFCB50;
  --yellow-100: #FFBF24;
  --yellow-shade: #E0A500;

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */
  /* Text */
  --text-strong:  var(--navy-100);   /* headings */
  --text-body:    #2A3138;           /* paragraphs */
  --text-muted:   var(--navy-60);    /* secondary, captions */
  --text-faint:   var(--navy-40);    /* placeholder, disabled */
  --text-on-dark: #FFFFFF;
  --text-on-blue: #FFFFFF;
  --text-link:    var(--blue-100);

  /* Surfaces */
  --surface-page:    #FFFFFF;
  --surface-subtle:  var(--grey-40);   /* section backgrounds */
  --surface-card:    #FFFFFF;
  --surface-sunken:  var(--grey-20);
  --surface-dark:    var(--navy-100);  /* footers, dark sections */
  --surface-dark-2:  var(--navy-soft);
  --surface-brand:   var(--blue-100);
  --surface-mint:    var(--mint-100);

  /* Lines & borders */
  --border-subtle: var(--grey-line);
  --border-strong: var(--navy-20);
  --border-focus:  var(--blue-100);

  /* Interactive / brand */
  --brand-primary:        var(--blue-100);
  --brand-primary-hover:  var(--blue-shade);
  --brand-primary-press:  var(--blue-deep);
  --brand-secondary:      var(--mint-100);
  --brand-secondary-hover:var(--mint-shade);
  --accent:               var(--yellow-100);

  /* Status (derived to fit palette) */
  --success:      var(--mint-shade);
  --success-bg:   var(--mint-10);
  --warning:      var(--yellow-shade);
  --warning-bg:   var(--yellow-10);
  --error:        #E5484D;
  --error-bg:     #FDECEC;
  --info:         var(--blue-100);
  --info-bg:      var(--blue-10);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(0, 115, 255, 0.28);
}

/* ============================================================
   TYPOGRAPHY  —  Finance Family
   Questrial   : primary — headings + body (single weight)
   Montserrat  : sub-headings (Bold, UPPERCASE) + body alternate
   ============================================================ */
:root {
  /* Families */
  --font-display: "Questrial", "Montserrat", system-ui, sans-serif; /* headings */
  --font-body:    "Montserrat", system-ui, sans-serif;              /* paragraphs */
  --font-eyebrow: "Montserrat", system-ui, sans-serif;              /* bold caps sub-heads */

  /* Weights (Questrial ships one weight = 400) */
  --fw-regular: 400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:    700;  /* @kind font */

  /* Fluid display scale (clamp: min / preferred / max) */
  --text-display: clamp(2.75rem, 6vw, 4.5rem);  /* @kind font */
  --text-h1: clamp(2.25rem, 4.6vw, 3.25rem);  /* @kind font */
  --text-h2: clamp(1.75rem, 3.4vw, 2.5rem);  /* @kind font */
  --text-h3: clamp(1.375rem, 2.2vw, 1.75rem);  /* @kind font */
  --text-h4: 1.25rem;
  --text-lead: 1.25rem;     /* intro paragraph */
  --text-base: 1rem;        /* body */
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-eyebrow: 0.8125rem;

  /* Line heights */
  --lh-tight: 1.05;  /* @kind other */
  --lh-snug: 1.18;  /* @kind other */
  --lh-heading: 1.22;  /* @kind other */
  --lh-body: 1.6;  /* @kind other */
  --lh-relaxed: 1.75;  /* @kind other */

  /* Letter spacing */
  --ls-display: -0.02em;  /* @kind other */
  --ls-heading: -0.01em;  /* @kind other */
  --ls-body: 0;  /* @kind other */
  --ls-eyebrow: 0.14em;  /* @kind other */
}

/* ---------- Reusable type roles ---------- */
.ff-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
}
.ff-h1 { font-family: var(--font-display); font-size: var(--text-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--text-strong); }
.ff-h2 { font-family: var(--font-display); font-size: var(--text-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--text-strong); }
.ff-h3 { font-family: var(--font-display); font-size: var(--text-h3); line-height: var(--lh-snug); color: var(--text-strong); }
.ff-h4 { font-family: var(--font-display); font-size: var(--text-h4); line-height: var(--lh-snug); color: var(--text-strong); }

.ff-eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: var(--fw-bold);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
}

.ff-lead { font-family: var(--font-body); font-size: var(--text-lead); line-height: var(--lh-relaxed); color: var(--text-body); }
.ff-body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-body); color: var(--text-body); }
.ff-small { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--lh-body); color: var(--text-muted); }

/* ============================================================
   SPACING & LAYOUT  —  Finance Family
   8px base rhythm. The brand's pill/capsule motif means radii
   run generous and frequently fully-rounded.
   ============================================================ */
:root {
  /* Spacing scale (8px base) */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-9: 4rem;      /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6rem;     /* 96 */
  --space-12: 8rem;     /* 128 */

  /* Section rhythm */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);  /* @kind spacing */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* ---- Radii ----  (capsule motif → big, often full) */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;   /* the FF capsule — buttons, chips, inputs */
  --radius-circle: 50%;
}

/* ============================================================
   ELEVATION  —  Finance Family
   Soft, low, blue-tinted shadows. Cards are clean: light border
   + a gentle lift, never heavy drop shadows.
   ============================================================ */
:root {
  /* Shadows — cool/navy tinted, soft */
  --shadow-xs: 0 1px 2px rgba(15, 20, 24, 0.06);
  --shadow-sm: 0 2px 8px rgba(15, 20, 24, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 20, 24, 0.08);
  --shadow-lg: 0 18px 48px rgba(15, 20, 24, 0.10);
  --shadow-xl: 0 30px 70px rgba(15, 20, 24, 0.14);

  /* Brand-tinted lift — used on hover for blue CTAs / feature cards */
  --shadow-brand: 0 14px 34px rgba(0, 115, 255, 0.28);
  --shadow-mint:  0 14px 34px rgba(0, 222, 194, 0.30);

  /* Focus ring lives in colors.css as --ring */

  /* Motion — calm, no bounce. Confident ease-out. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur: 200ms;  /* @kind other */
  --dur-slow: 360ms;  /* @kind other */
}