/* ==========================================================================
   Latestinvest — Nova  ·  DESIGN TOKENS
   Values extracted verbatim from the Nova Investments Webflow template
   (novainvestments.6af013c60.css). Colours + effective desktop sizes are
   exact; type/space are expressed as ACSS-style fluid clamp() (modern CSS).
   ========================================================================== */
@layer tokens {
  :root {
    /* ---- Brand palette (exact hex from source :root) -------------------- */
    --li-black:            #000000;
    --li-white:            #ffffff;
    --li-blue:             #004a87;   /* primary */
    --li-navy:             #293845;   /* dark surface / ink */
    --li-green:            #93f4bf;   /* accent */
    --li-light-blue:       #07adff;   /* hairline / active border */

    /* navy tints */
    --li-navy-5:           #f4f5f6;
    --li-navy-10:          #eaebec;
    --li-navy-30:          #bfc3c7;
    --li-navy-50:          #949ca2;
    --li-navy-80:          #54606a;

    /* blue tints */
    --li-blue-10:          #e5edf3;
    --li-blue-30:          #b3c9db;
    --li-blue-50:          #80a4c3;
    --li-blue-80:          #336e9f;

    /* green tints */
    --li-green-10:         #f4fef9;
    --li-green-30:         #dffcec;
    --li-green-50:         #c9fadf;
    --li-green-80:         #a9f6cc;

    /* semantic */
    --li-error:            #f97066;
    --li-success:          #12b76a;
    --li-warning:          #fdb022;
    --li-bar-navy-5:       rgba(244, 245, 246, .5);

    /* role aliases (use these in components) */
    --li-bg:               var(--li-white);
    --li-bg-alt:           var(--li-navy-5);
    --li-surface-blue:     var(--li-blue);
    --li-surface-navy:     var(--li-navy);
    --li-ink:              var(--li-black);
    --li-ink-soft:         var(--li-navy-80);
    --li-hairline:         var(--li-light-blue);

    /* ---- Typography ---------------------------------------------------- */
    /* Display + body share Arimo in the source; Open Sans is loaded but the
       stylesheet applies Arimo to headings AND body. Keep Arimo primary. */
    --li-font-display: "Arimo", "Open Sans", Arial, sans-serif;
    --li-font-body:    "Arimo", "Open Sans", Arial, sans-serif;

    --li-weight-regular:  400;
    --li-weight-medium:   500;
    --li-weight-semibold: 600;

    /* Fluid type scale — max = Nova's exact desktop rem, min scaled for mobile.
       clamp(min, preferred(vw), max). 1rem = 16px assumed. */
    --li-h1:   clamp(2.375rem, 1.55rem + 3.9vw, 3.5rem);   /* 3.5rem  desktop */
    --li-h2:   clamp(2.125rem, 1.55rem + 2.7vw, 3rem);     /* 3rem    desktop */
    --li-h3:   clamp(1.875rem, 1.55rem + 1.55vw, 2.25rem); /* 2.25rem desktop */
    --li-h4:   clamp(1.5rem,  1.34rem + 0.78vw, 1.75rem);  /* 1.75rem desktop */
    --li-h5:   clamp(1.35rem, 1.28rem + 0.35vw, 1.5rem);   /* 1.5rem  desktop */
    --li-h6:   1.25rem;                                     /* 1.25rem */

    --li-text-tiny:    0.75rem;    /* line-height 1.6 */
    --li-text-small:   0.875rem;   /* 1.5  */
    --li-text-regular: 1rem;       /* 1.7  */
    --li-text-medium:  1.125rem;   /* 1.5  */
    --li-text-large:   1.25rem;    /* 1.6  */

    --li-lh-tight:   1.1;
    --li-lh-heading: 1.3;
    --li-lh-body:    1.6;
    --li-tracking-eyebrow: 0.08rem;

    /* ---- Spacing scale (from .spacer-* — exact) ------------------------ */
    --li-space-xs:     0.5rem;
    --li-space-sm:     1rem;
    --li-space-md:     2rem;
    --li-space-lg:     3rem;
    --li-space-xl:     5rem;   /* spacer-xxl */
    --li-space-huge:   6rem;

    /* section rhythm (fluid: shrink on mobile, exact on desktop) */
    --li-section-sm:   clamp(2rem, 1.1rem + 4vw, 3rem);   /* 3rem  */
    --li-section-md:   clamp(3rem, 1.7rem + 6vw, 5rem);   /* 5rem  */
    --li-section-lg:   clamp(4rem, 1.8rem + 9.5vw, 8rem); /* 8rem  */
    --li-pad-global:   clamp(1.25rem, 0.4rem + 3.4vw, 2.5rem); /* 2.5rem */
    --li-pad-xxl:      5rem;

    /* ---- Layout -------------------------------------------------------- */
    --li-container:        80rem;   /* container-large */
    --li-container-medium: 64rem;
    --li-grid-gap-col:     5rem;
    --li-grid-gap-row:     4rem;
    --li-navbar-h:         4.5rem;

    /* ---- Shape --------------------------------------------------------- */
    --li-radius-s:  0.375rem;
    --li-radius-m:  0.75rem;
    --li-radius-l:  1.25rem;
    --li-radius-pill: 999rem;

    /* ---- Motion (see ANIMATIONS-SPEC.md; reimplemented in GSAP+Lenis) --- */
    --li-ease-out:   cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Webflow "ease" ~ power2.out */
    --li-dur-fast:   0.2s;
    --li-dur-base:   0.6s;
    --li-dur-slow:   0.9s;

    /* ---- Breakpoints (Webflow defaults; for reference in @media) -------- */
    /* 991px tablet · 767px landscape phone · 479px portrait phone */
  }
}