/* ==========================================================================
   Net-Vendor - design tokens
   Palette: blue / black / white only. Blue is the single accent.
   Structure & motion language: Velrio Studio + Mark Studio references.
   ========================================================================== */

:root {
  /* --- Brand -----------------------------------------------------------
     Three colours only: blue, black, white. No navy, no secondary hue.
     Blue is the single accent and it is vivid, not muted.                */
  --nv-black:        #0A0B0D;   /* true black sections */
  --nv-black-2:      #131519;   /* raised surface on black */
  --nv-black-3:      #1D2026;   /* hairline / chip fill on black */

  --nv-blue:         #1A6DFF;   /* the accent. buttons, links, key words  */
  --nv-blue-hover:   #0B55D6;
  --nv-blue-deep:    #0A3FA8;   /* gradient floor only */
  --nv-blue-bright:  #4A90FF;   /* gradient highlight only */
  --nv-blue-tint:    #E8F0FF;   /* pale wash on white */

  --nv-paper:        #FFFFFF;
  --nv-paper-2:      #F5F6F8;
  --nv-paper-3:      #EBEDF1;

  /* --- Semantic ------------------------------------------------------- */
  --bg:              var(--nv-paper);
  --bg-alt:          var(--nv-paper-2);
  --bg-dark:         var(--nv-black);
  --fg:              var(--nv-black);
  --fg-muted:        #5B6170;
  --fg-faint:        #8B909C;
  --fg-on-dark:      #FFFFFF;
  --fg-on-dark-mut:  rgba(255, 255, 255, 0.64);
  --fg-on-dark-fnt:  rgba(255, 255, 255, 0.40);

  --rule:            rgba(10, 11, 13, 0.10);
  --rule-strong:     rgba(10, 11, 13, 0.18);
  --rule-on-dark:    rgba(255, 255, 255, 0.14);

  --accent:          var(--nv-blue);
  --accent-hover:    var(--nv-blue-hover);
  --accent-on-dark:  var(--nv-blue-bright);
  --focus:           var(--nv-blue);

  /* --- Type ----------------------------------------------------------- */
  --font-display: "Instrument Sans", "Inter Tight", -apple-system,
                  BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
                  sans-serif;
  --font-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                  Consolas, monospace;

  /* Fluid display scale. clamp(min, preferred, max) */
  --t-hero:   clamp(2.5rem, 6.4vw, 6rem);
  --t-d1:     clamp(2.5rem, 5.6vw, 4.75rem);
  --t-d2:     clamp(2rem, 4vw, 3.25rem);
  --t-d3:     clamp(1.5rem, 2.6vw, 2.125rem);
  --t-lead:   clamp(1.0625rem, 1.5vw, 1.375rem);
  --t-body:   1rem;
  --t-sm:     0.875rem;
  --t-xs:     0.75rem;
  --t-label:  0.6875rem;

  --lh-tight: 0.92;
  --lh-snug:  1.12;
  --lh-copy:  1.62;

  --ls-hero:  -0.045em;
  --ls-disp:  -0.025em;
  --ls-label: 0.16em;

  /* --- Space ---------------------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  --section-y: clamp(4.5rem, 9vw, 9rem);
  --gutter:    clamp(1rem, 4vw, 3.5rem);
  --maxw:      84rem;
  --maxw-text: 46rem;

  /* --- Radius / elevation --------------------------------------------- */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  26px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(7, 11, 17, 0.05),
               0 2px 8px rgba(7, 11, 17, 0.04);
  --shadow-md: 0 2px 4px rgba(7, 11, 17, 0.04),
               0 12px 32px rgba(7, 11, 17, 0.08);
  --shadow-lg: 0 4px 8px rgba(7, 11, 17, 0.05),
               0 24px 64px rgba(7, 11, 17, 0.12);

  /* --- Motion ---------------------------------------------------------
     One scale, used by everything. Nothing animates off-scale.          */
  --dur-1: 120ms;   /* micro: colour, opacity on small controls */
  --dur-2: 220ms;   /* standard: hover lift, chip, link underline */
  --dur-3: 380ms;   /* entering elements, accordion */
  --dur-4: 620ms;   /* scroll reveal */
  --dur-5: 900ms;   /* hero entrance */

  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  --rise-sm: 8px;
  --rise-md: 18px;
  --rise-lg: 34px;

  --stagger: 70ms;

  /* --- Layers ---------------------------------------------------------- */
  --z-hero-canvas: 0;
  --z-hero-content: 2;
  --z-sticky: 50;
  --z-nav: 100;
  --z-overlay: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
    --dur-5: 1ms;
    --rise-sm: 0px;
    --rise-md: 0px;
    --rise-lg: 0px;
    --stagger: 0ms;
  }
}