/* ==========================================================================
   FILE: css/variables.css
   Design tokens — colours sampled directly from Mockup v2.
========================================================================== */

:root{

  /* ---------- SURFACE ------------------------------------------------- */
  --bg:              #030917;
  --bg-deep:         #01050E;
  --bg-raise:        #060D1E;
  --surface:         rgba(255,255,255,.030);
  --surface-2:       rgba(255,255,255,.055);
  --surface-solid:   #0A1224;
  --line:            rgba(255,255,255,.070);
  --line-strong:     rgba(255,255,255,.140);

  /* ---------- TEXT ---------------------------------------------------- */
  --text:            #EEF1F8;
  --text-2:          #98A2B8;
  --text-3:          #616C84;

  /* ---------- ACCENT -------------------------------------------------- */
  --violet:          #8B3BF1;
  --violet-soft:     #A971F7;
  --indigo:          #5B4FE6;
  --blue:            #3B82F6;
  --blue-soft:       #7EB3FF;

  --green:           #2ED47A;
  --amber:           #F5A524;
  --red:             #F0435C;

  /* ---------- GRADIENT ------------------------------------------------ */
  --grad-brand:      linear-gradient(135deg,#5B4FE6 0%,#8B3BF1 100%);
  --grad-text:       linear-gradient(90deg,#6153E6 0%,#9D50F7 55%,#C56BF5 100%);
  --grad-card:       linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  --grad-rule:       linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);

  /* ---------- TYPE -----------------------------------------------------
     Four sizes. Everything else is weight, colour and spacing.          */
  --font:            "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:       "JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;

  --t-display:       clamp(42px,5.2vw,72px);
  --t-title:         clamp(28px,3vw,42px);
  --t-lead:          18px;
  --t-body:          15px;
  --t-micro:         13px;

  /* ---------- SPACE (8px scale) --------------------------------------- */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  /* Applied as padding-block, i.e. BOTH sides — so the gap between two
     adjacent sections is twice this value. At the old clamp(72px,7.5vw,116px)
     that meant 108+108 = 216px between sections at a 1440px window, which is
     not a number anyone chose; it was two paddings meeting. 216 is not even on
     the spacing scale below.

     64px per side (=> a 128px gap) was the next answer, and it is the right
     one for a conventional marketing page: on the scale, inside the 120-160px
     the design notes call for. It is NOT the right one for this page. The
     reference mockup was measured at roughly 32px between sections -- a
     quarter of that -- because it reads as a dashboard, not as SaaS marketing.
     Density is the point. So: 16px per side => a 32px gap.

     Kept as a clamp so narrow windows do not collapse; the floor is the same
     fraction of the old floor.

     If you change this, remember to think in DOUBLES: the visible gap is
     2 x this value. The two exceptions are deliberate --
       hero -> pipeline   hero carries its own 39px bottom padding, and the
                          pipeline block its own 16px top, giving 55px. That
                          is the one boundary the mockup keeps generous.
       the .abp / .abc blocks are self-contained and set their own 16px, so
                          they are NOT governed by this variable. Changing it
                          will not move them. */
  --section-y:       clamp(12px,1.11vw,16px);

  /* ---------- FRAME ---------------------------------------------------- */
  --container:       1280px;
  --gutter:          clamp(20px,4vw,40px);

  /* ---------- RADIUS ---------------------------------------------------- */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px;
  --r-pill:999px;

  /* ---------- ELEVATION -------------------------------------------------- */
  --sh-1: 0 4px 14px rgba(0,0,0,.30);
  --sh-2: 0 18px 40px rgba(0,0,0,.42);
  --sh-3: 0 40px 100px rgba(0,0,0,.55);
  --sh-brand: 0 16px 40px rgba(107,63,232,.35);

  /* ---------- MOTION ------------------------------------------------------ */
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast:.18s; --mid:.28s; --slow:.6s;

  /* ---------- LAYER -------------------------------------------------------- */
  --z-bg:0; --z-body:1; --z-float:20; --z-nav:100; --z-top:1000;
}

::selection{ background:var(--violet); color:#fff; }

:root{
  scrollbar-color:#26304A var(--bg);
  scrollbar-width:thin;
  color-scheme:dark;
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#26304A; border-radius:var(--r-pill); }
::-webkit-scrollbar-thumb:hover{ background:#3A4768; }