/*
  Fontavis Finance brand colors (confirmed with the owner 2026-07-28).
  Typography and spacing were already final — measured from netsuite.com,
  DESIGN-REFERENCE.md §1 and §3.
*/

:root {
  /* type */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: Georgia, 'Source Serif 4', serif;

  --text-body-size: 18px;
  --text-body-weight: 400;
  --text-body-leading: 27px;

  --text-display-size: 60px;
  --text-display-weight: 300;
  --text-display-leading: 66px;

  --text-subdisplay-size: 48px;
  --text-subdisplay-weight: 300;
  --text-subdisplay-leading: 52.8px;

  --text-card-heading-size: 20px;
  --text-card-heading-weight: 500;
  --text-card-heading-leading: 26px;

  --text-eyebrow-size: 14px;
  --text-eyebrow-weight: 700;
  --text-eyebrow-leading: 18.2px;

  --text-h1-inner-size: 36px;
  --text-h1-inner-weight: 400;
  --text-h1-inner-leading: 42.1px;

  --text-h2-inner-size: 32px;
  --text-h2-inner-weight: 400;
  --text-h2-inner-leading: 37.4px;

  /* the signature detail */
  --rule-width: 40px;
  --rule-height: 5px;
  --radius: 4px;
  --container: 1440px;

  /* ============ Fontavis Finance brand colors ============ */
  /* Two darks, same structural roles as NetSuite's two-bar header:
     top bar is the lighter dark, nav bar is the darker dark. */
  --surface-dark:   #0F172A;  /* deep navy — nav bar, dark section bands */
  --surface-nav:    #0F172A;  /* deep navy — nav bar (same tone, single dark on this palette) */
  --surface-topbar: #334155;  /* slate blue — top bar (lighter of the two darks) */

  /* Page backgrounds stay soft; pure white is reserved for cards sitting on top —
     same layering NetSuite uses, translated from "warm cream" to this palette's cool light gray. */
  --surface-page:   #F8FAFC;  /* light gray — whole-page background */
  --surface-white:  #FFFFFF;  /* pure white — cards only */
  --surface-cream:  #F8FAFC;  /* alias kept for DESIGN-REFERENCE.md compatibility */

  /* One accent, used for both the primary CTA and the heading rule */
  --accent-primary: #22D3EE;  /* teal — primary CTA buttons ("Free Product Tour") */
  --accent-rule:    #22D3EE;  /* teal — the 40x5 rule under headings */

  /* Body text — a slate tone rather than pure black, consistent with the palette */
  --text-color:       #1E293B;
  --text-color-muted: #64748B;
  /* =========================================================== */
}