/* ============================================================================
   Finology Software — Colors & Type
   Source of truth: Figma (Current-designs / Styleguide) + finology.tech
   System: Flowbite + Tailwind primary blue. Inter is the typeface.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Archivo+Black&display=swap');

:root {
  /* ---------- BRAND ---------- */
  /* The deep navy in the wordmark + gradient ribbon "F" */
  --fnl-navy:        rgb(35, 56, 118);   /* logo navy — accents, dark surfaces */
  --fnl-navy-deep:   rgb(0, 39, 102);    /* deepest brand ink, used on nav text */
  --fnl-sky-1:       rgb(126, 200, 227); /* logo gradient top */
  --fnl-sky-2:       rgb(76, 126, 184);  /* logo gradient mid */

  /* ---------- PRIMARY (Flowbite Blue scale) ---------- */
  --primary-50:  #ebf5ff;
  --primary-100: #e1effe;   /* sky tint backgrounds */
  --primary-200: #c3ddfd;
  --primary-300: #a4cafe;
  --primary-400: #76a9fa;
  --primary-500: #3f83f8;   /* button hover / focus halo */
  --primary-600: #1c64f2;   /* PRIMARY — most CTAs, links, dot accents */
  --primary-700: #1a56db;   /* hero titles, emphasized text */
  --primary-800: #1e429f;   /* dark hover */
  --primary-900: #233876;   /* === logo navy bucket === */

  /* ---------- NEUTRAL (Flowbite Gray) ---------- */
  --gray-50:  #f9fafb;   /* page bg, subtle surfaces */
  --gray-100: #f3f4f6;   /* footer / muted strip */
  --gray-200: #e5e7eb;   /* borders */
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;   /* disabled / copyright */
  --gray-500: #6b7280;   /* body secondary, descriptions */
  --gray-600: #4b5563;   /* body */
  --gray-700: #374151;   /* dense text */
  --gray-800: #1f2a37;   /* headings */
  --gray-900: #111928;   /* darkest ink */

  /* ---------- ACCENT / SECONDARY ---------- */
  /* These are the "marketing" brand accents that ship in hero ellipses + icons */
  --teal:        rgb(22, 189, 202);     /* charts second series, donut */
  --teal-100:    rgb(213, 245, 246);
  --teal-200:    rgb(175, 236, 239);
  --green:       rgb(14, 159, 110);     /* success text */
  --green-200:   rgb(132, 225, 188);    /* hero ellipse — left */
  --green-300:   rgb(222, 247, 236);    /* feature numeral fill */
  --orange-200:  rgb(253, 186, 140);    /* hero ellipse — right, warm accent */
  --orange-300:  rgb(254, 236, 220);    /* avatar bg */
  --orange-500:  rgb(255, 138, 76);     /* avatar text */
  --red-700:     rgb(208, 56, 1);       /* "blue type=red" icon shape */
  --purple-700:  rgb(79, 55, 138);      /* purple icon shape */

  /* ---------- SEMANTIC ---------- */
  --bg:           #ffffff;
  --bg-subtle:    var(--gray-50);
  --bg-muted:     var(--gray-100);
  --surface:      #ffffff;
  --surface-card: #ffffff;

  --fg:           var(--gray-900);
  --fg-strong:    var(--gray-800);
  --fg-default:   var(--gray-700);
  --fg-muted:     var(--gray-500);
  --fg-faint:     var(--gray-400);
  --fg-on-primary:#ffffff;

  --link:         var(--primary-600);
  --link-hover:   var(--primary-700);

  --border:       var(--gray-200);
  --border-soft:  var(--gray-100);
  --focus-ring:   rgba(63, 131, 248, 0.5);

  /* ---------- ELEVATION ---------- */
  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.08);
  --shadow-sm:  0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.06);
  --shadow-lg:  0 5px 12px 0 rgba(0,0,0,0.10);                 /* FAQ cards */
  --shadow-xl:  0 4px 12px 0 rgba(13,10,44,0.06);              /* pricing cards */
  --shadow-glow:0 4px 135px 65px rgba(164,202,254,0.30);        /* hero halo */

  /* ---------- RADII ---------- */
  --r-sm:  4px;
  --r:     8px;          /* default — buttons, cards, inputs */
  --r-md:  12px;
  --r-lg:  16px;         /* pricing cards */
  --r-xl:  20px;
  --r-2xl: 24px;
  --r-full:9999px;

  /* ---------- SPACING (Tailwind 4px scale) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10:40px;
  --s-12:48px;
  --s-16:64px;
  --s-20:80px;
  --s-24:96px;
  --s-32:128px;

  /* page rails — desktop is 1440 max with 160px gutters (1120 content) */
  --container-max: 1120px;
  --gutter:        160px;

  /* ---------- TYPE ---------- */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: 'Inter', var(--font-sans);
  --font-numeral: 'Archivo Black', var(--font-sans); /* the giant 270px feature numerals "1 2 3" */
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* core scale — Tailwind text-* */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-lg:   18px;
  --t-xl:   20px;
  --t-2xl:  24px;
  --t-3xl:  30px;
  --t-4xl:  36px;   /* hero / section title */
  --t-5xl:  48px;   /* pricing $ */
  --t-6xl:  60px;
  --t-7xl:  72px;
  --t-8xl:  96px;

  --lh-tight:   1.25;
  --lh-snug:    1.375;
  --lh-normal:  1.5;     /* the dominant Figma value */
  --lh-relaxed: 1.625;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;
}

/* ---------- SEMANTIC TYPE ROLES (for direct use as classes) ---------- */
.body { font: var(--fw-regular) var(--t-base)/var(--lh-normal) var(--font-sans); color: var(--fg-default); }

.h1 {            /* hero / page title */
  font: var(--fw-bold) var(--t-4xl)/var(--lh-normal) var(--font-display);
  color: var(--primary-700);                  /* hero color in Figma */
  letter-spacing: -0.01em;
}
.h2 {            /* section title */
  font: var(--fw-bold) var(--t-4xl)/var(--lh-normal) var(--font-display);
  color: var(--gray-800);
}
.h3 {            /* card title */
  font: var(--fw-bold) var(--t-xl)/var(--lh-tight) var(--font-display);
  color: var(--gray-800);
}
.h4 {            /* eyebrow / column heading */
  font: var(--fw-bold) var(--t-sm)/var(--lh-normal) var(--font-display);
  color: var(--gray-900);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lede {          /* section subtitle under h2 */
  font: var(--fw-regular) var(--t-base)/var(--lh-normal) var(--font-sans);
  color: var(--gray-500);
}
.eyebrow {       /* small all-caps */
  font: var(--fw-bold) var(--t-sm)/var(--lh-normal) var(--font-sans);
  color: var(--gray-900);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.body-strong { font: var(--fw-medium) var(--t-base)/var(--lh-normal) var(--font-sans); color: var(--fg-strong); }
.body-sm     { font: var(--fw-regular) var(--t-sm)/var(--lh-normal) var(--font-sans); color: var(--gray-500); }
.caption     { font: var(--fw-medium) var(--t-xs)/var(--lh-normal) var(--font-sans); color: var(--gray-500); }
.copyright   { font: var(--fw-regular) var(--t-xs)/var(--lh-normal) var(--font-sans); color: var(--gray-400); }

a, .link {
  color: var(--link);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover, .link:hover { color: var(--link-hover); }

/* utility — feature numerals (the giant tinted "1 2 3" Archivo Black) */
.feature-numeral {
  font: 400 270px/100% var(--font-numeral);
  letter-spacing: 0;
}