/* Silentra Networks – design tokens. Import this before all other stylesheets. */
:root {
  /* ── Palette ── */
  --bg:           #FFFFFF;
  --bg-soft:      #FAFAF9;
  --bg-warm:      #F5F3F0;   /* warm neutral for alternating sections */
  --bg-tint:      #F9FCEF;   /* faint lime tint — pairs with NVIDIA green */
  --text:         #0A0A0A;
  --text-muted:   #525252;
  --text-subtle:  #737373;
  --border:       #E5E5E5;
  --border-soft:  #EFEFEF;

  /* Primary — NVIDIA green (brand accent; links & CTAs use --accent / --primary) */
  --primary:        #76B900;
  --primary-hover:  #5F9300;
  --primary-strong: #5F9300;
  --primary-tint:   rgba(118, 185, 0, 0.08);
  --accent-soft:    #EEF7D6;   /* pale lime chips / soft BG — pairs with #76B900 */
  --accent:         #76B900;
  --btn-on-primary: #FFFFFF;
  --error:          #B91C1C;

  /* ── Secondary — deep navy for dark sections (hero, CTA, footer) ── */
  --secondary:        #0F172A;
  --secondary-light:  #1E293B;
  --secondary-muted:  #334155;
  --secondary-glow:   rgba(118, 185, 0, 0.20);

  /* ── Surface gradients ── */
  --gradient-hero:    radial-gradient(ellipse at 70% -10%, rgba(118, 185, 0,0.20), transparent 55%),
                      radial-gradient(ellipse at 10% 110%, rgba(118, 185, 0,0.14), transparent 50%),
                      linear-gradient(180deg, #0F172A 0%, #0A1020 100%);
  --gradient-cta:     radial-gradient(ellipse at center, rgba(118, 185, 0,0.18), transparent 60%),
                      linear-gradient(180deg, #0F172A 0%, #050A14 100%);

  /* ── Typography ── */
  --font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font);  /* H1, H2, pricing tiers, stat numbers only */
  --hero-h1-font-family: var(--font-display);

  /* Scale (px values expressed in rem) */
  --text-xs:   0.875rem;   /* 14px */
  --text-sm:   1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  3rem;       /* 48px */
  --text-4xl:  4rem;       /* 64px */

  /* Heading controls */
  --h1-size-desktop: 4rem;      /* 64px */
  --h1-size-mobile: 2.5rem;     /* 40px */
  --h2-size-desktop: 3rem;      /* 48px */
  --h2-size-mobile: 2rem;       /* 32px */
  --heading-color-light: var(--text);
  --heading-color-dark: #FFFFFF;

  /* ── Spacing (8px base unit) ── */
  --space-1:   0.5rem;     /* 8px  */
  --space-2:   1rem;       /* 16px */
  --space-3:   1.5rem;     /* 24px */
  --space-4:   2rem;       /* 32px */
  --space-5:   2.5rem;    /* 40px */
  --space-6:   3rem;       /* 48px */
  --space-7:   3.5rem;    /* 56px */
  --space-8:   4rem;       /* 64px */
  --space-10:  5rem;      /* 80px */
  --space-12:  6rem;       /* 96px */
  --space-16:  8rem;       /* 128px */

  /* ── Layout ── */
  --max-width:    1200px;
  --section-pad:  var(--space-16);   /* 128px desktop */

  /* ── Surfaces — modernised radii + layered shadows ── */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:      0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lift: 0 16px 40px -12px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-glow: 0 0 0 1px rgba(118, 185, 0, 0.18), 0 8px 24px rgba(118, 185, 0, 0.18);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur:        220ms;
  --dur-slow:   360ms;
}