/* ============================================================================
   FINOVAI · Design Tokens
   The single source of truth. Widgets and templates consume these variables;
   they never hardcode values. Change the brand here, everything follows.
   ============================================================================ */

:root {

  /* ---- Brand ---------------------------------------------------------- */
  --fv-navy:        #0B1F3A;   /* primary / ink on light */
  --fv-navy-700:    #0E2A4E;
  --fv-navy-900:    #05070F;   /* deepest background */
  --fv-blue:        #2563EB;   /* action / accent */
  --fv-blue-300:    #7AA5F5;
  --fv-gold:        #E2CB85;   /* premium accent — used sparingly */
  --fv-gold-600:    #C9A24B;

  /* ---- Neutrals ------------------------------------------------------- */
  --fv-paper:       #FFFFFF;
  --fv-cream:       #F6F4EE;   /* light luxe surface */
  --fv-mist:        #F3F6FC;   /* light surface */
  --fv-line:        #E4E9F2;   /* hairline on light */
  --fv-line-dark:   #1D2740;   /* hairline on dark */
  --fv-muted:       #56637E;   /* secondary text on light */
  --fv-muted-dark:  #8A97B8;   /* secondary text on dark */

  /* ---- Semantic (light context default) ------------------------------ */
  --fv-bg:          var(--fv-paper);
  --fv-fg:          var(--fv-navy);
  --fv-fg-soft:     var(--fv-muted);
  --fv-surface:     var(--fv-mist);
  --fv-border:      var(--fv-line);
  --fv-accent:      var(--fv-blue);
  --fv-accent-2:    var(--fv-gold);

  /* ---- Typography ----------------------------------------------------- */
  --fv-font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --fv-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --fv-font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --fv-font-serif:   'Fraunces', Georgia, serif;   /* luxe/editorial variant */

  /* Fluid type scale (clamp: min, preferred, max) */
  --fv-text-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fv-text-sm:   clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --fv-text-base: clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --fv-text-lg:   clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --fv-text-xl:   clamp(1.45rem, 1.30rem + 0.75vw, 1.90rem);
  --fv-text-2xl:  clamp(1.90rem, 1.60rem + 1.50vw, 2.90rem);
  --fv-text-3xl:  clamp(2.40rem, 1.90rem + 2.50vw, 3.80rem);
  --fv-text-4xl:  clamp(2.90rem, 2.00rem + 4.50vw, 5.60rem);
  --fv-text-hero: clamp(3.00rem, 1.80rem + 6.00vw, 6.20rem);

  --fv-leading-tight: 1.04;
  --fv-leading-snug:  1.25;
  --fv-leading-body:  1.62;
  --fv-tracking-tight: -0.03em;
  --fv-tracking-wide:  0.24em;   /* mono eyebrows */

  /* ---- Space scale (8pt-ish, fluid section rhythm) -------------------- */
  --fv-space-1: 0.25rem;
  --fv-space-2: 0.5rem;
  --fv-space-3: 0.75rem;
  --fv-space-4: 1rem;
  --fv-space-6: 1.5rem;
  --fv-space-8: 2rem;
  --fv-space-12: 3rem;
  --fv-space-16: 4rem;
  --fv-space-24: 6rem;
  --fv-gutter:   clamp(1.25rem, 5vw, 4rem);
  --fv-section:  clamp(3rem, 6vw, 5.25rem);      /* vertical section padding */
  --fv-wrap:     1240px;                          /* max content width */
  --fv-wrap-narrow: 820px;

  /* ---- Radius --------------------------------------------------------- */
  --fv-radius-sm: 10px;
  --fv-radius:    16px;
  --fv-radius-lg: 24px;
  --fv-radius-pill: 100px;

  /* ---- Elevation ------------------------------------------------------ */
  --fv-shadow-sm: 0 4px 16px -8px rgba(11,31,58,.18);
  --fv-shadow:    0 18px 48px -24px rgba(11,31,58,.28);
  --fv-shadow-lg: 0 40px 90px -50px rgba(11,31,58,.45);
  --fv-glow-gold: 0 10px 34px -10px rgba(226,203,133,.55);

  /* ---- Motion --------------------------------------------------------- */
  --fv-ease:      cubic-bezier(.22,.61,.36,1);
  --fv-ease-out:  cubic-bezier(.16,1,.3,1);
  --fv-dur-fast:  .25s;
  --fv-dur:       .4s;
  --fv-dur-slow:  .8s;

  /* ---- Layering ------------------------------------------------------- */
  --fv-z-header: 50;
  --fv-z-overlay: 40;
}

/* Dark context: any element inside .fv-dark flips semantic tokens.
   This is how hero/footer/dark sections stay token-driven, not hardcoded. */
.fv-dark {
  --fv-bg:      var(--fv-navy-900);
  --fv-fg:      var(--fv-paper);
  --fv-fg-soft: var(--fv-muted-dark);
  --fv-surface: var(--fv-navy-700);
  --fv-border:  var(--fv-line-dark);
}