/* VNETWORK Design System tokens (font loaded from Google Fonts in HTML) */

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary red — used 2,400+ times in source */
  --vn-red:           #E8202A;   /* primary brand */
  --vn-red-alt:       #ED1C24;   /* secondary red, button gradients */
  --vn-red-bright:    #FF2323;   /* high-energy accent in gradients */
  --vn-orange:        #F47920;   /* logo accent (V in VNCDN) */
  --vn-orange-bright: #FF7033;   /* gradient companion */

  /* Neutral foundations */
  --vn-fg-1:          #1A1818;   /* primary text on light bg */
  --vn-fg-2:          #212121;   /* default body text */
  --vn-fg-3:          #3D3D3D;   /* dense paragraph text */
  --vn-fg-4:          #515558;   /* secondary text */
  --vn-fg-5:          #8A8A8A;   /* tertiary / placeholder */
  --vn-fg-6:          #ADADAF;   /* disabled, dividers */

  --vn-bg-app:        #FFFFFF;
  --vn-bg-soft:       #F7F8FA;   /* page sections, surfaces */
  --vn-bg-soft-alt:   #F5F5F5;   /* cards, quote blocks */
  --vn-bg-quote:      #F5F5F7;
  --vn-bg-warm:       #FDF6F0;   /* warm card top-glow */
  --vn-bg-warm-alt:   #FDF0F0;   /* red-tinted card glow */

  /* Borders */
  --vn-border:        #EEEEEE;
  --vn-border-strong: #DADDE3;
  --vn-border-soft:   #F5F5F7;

  /* Footer / dark surface */
  --vn-dark:          #1A1A2E;
  --vn-dark-2:        #060628;
  --vn-dark-3:        #18024F;
  --vn-dark-link:     #000099;

  /* Semantic */
  --vn-success:       #16A34A;
  --vn-warning:       #FDC84A;
  --vn-info:          #14CFE4;
  --vn-error:         var(--vn-red);

  /* Signature gradients */
  --vn-grad-cta:      linear-gradient(135deg, #E8202A 0%, #FF2323 50%, #FF7033 100%);
  --vn-grad-button:   linear-gradient(180deg, rgba(255,255,255,0.17) 0%, rgba(255,255,255,0) 100%), linear-gradient(#E8202A, #E8202A);
  --vn-grad-card:     linear-gradient(180deg, rgba(253,246,240,0.5) 0%, rgba(255,255,255,0) 70%);
  --vn-grad-card-red: linear-gradient(180deg, rgba(253,240,240,0.5) 0%, rgba(255,255,255,0) 50%);
  --vn-grad-icon:     linear-gradient(180deg, #FF2323 0%, #FF7033 76%);

  /* ---------- TYPOGRAPHY ---------- */
  --vn-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Display & headings (Figma weights observed) */
  --vn-font-h1: 800 56px/1.1 var(--vn-font-sans);   /* hero */
  --vn-font-h2: 700 40px/1.15 var(--vn-font-sans);  /* section */
  --vn-font-h3: 700 32px/1.25 var(--vn-font-sans);  /* sub-section */
  --vn-font-h4: 700 24px/1.3 var(--vn-font-sans);
  --vn-font-h5: 600 20px/1.4 var(--vn-font-sans);
  --vn-font-h6: 600 16px/1.5 var(--vn-font-sans);

  /* Body */
  --vn-font-lead:  500 20px/1.5 var(--vn-font-sans);
  --vn-font-body:  400 16px/1.6 var(--vn-font-sans);
  --vn-font-body-sm: 400 14px/1.5 var(--vn-font-sans);
  --vn-font-caption: 400 12px/1.5 var(--vn-font-sans);

  /* Interactive */
  --vn-font-button: 500 16px/1.5 var(--vn-font-sans);
  --vn-font-tag:    600 12px/1.3 var(--vn-font-sans);

  /* Letter spacing — Figma uses a tight -0.022em on running text */
  --vn-tracking-tight:   -0.036em;
  --vn-tracking-normal:  -0.022em;
  --vn-tracking-loose:    0.02em;

  /* ---------- SPACING ---------- */
  --vn-space-1: 4px;
  --vn-space-2: 8px;
  --vn-space-3: 12px;
  --vn-space-4: 16px;
  --vn-space-5: 24px;
  --vn-space-6: 32px;
  --vn-space-7: 48px;
  --vn-space-8: 64px;
  --vn-space-9: 96px;
  --vn-space-10: 128px;

  /* Page rhythm */
  --vn-section-y: 96px;
  --vn-container-max: 1200px;
  --vn-container-pad: 72px;

  /* ---------- RADII ---------- */
  --vn-radius-xs: 4px;    /* buttons */
  --vn-radius-sm: 8px;    /* small chips */
  --vn-radius-md: 12px;
  --vn-radius-lg: 16px;   /* cards (most common) */
  --vn-radius-xl: 24px;
  --vn-radius-full: 999px;

  /* ---------- ELEVATION ---------- */
  --vn-shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.05);
  --vn-shadow-md: 0 4px 12px rgba(26,26,46,0.06), 0 2px 4px rgba(26,26,46,0.04);
  --vn-shadow-lg: 0 12px 32px rgba(26,26,46,0.08), 0 4px 8px rgba(26,26,46,0.04);
  --vn-shadow-red: 0 8px 24px rgba(232,32,42,0.20);
  --vn-shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(26,26,46,0.06);
  --vn-shadow-nav: 0 1px 0 rgba(218,221,227,0.5);

  /* ---------- MOTION ---------- */
  --vn-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --vn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --vn-dur-fast: 120ms;
  --vn-dur: 200ms;
  --vn-dur-slow: 360ms;
}

/* ---------- SEMANTIC ELEMENTS ---------- */
html { font-family: var(--vn-font-sans); color: var(--vn-fg-2); }
body { font: var(--vn-font-body); letter-spacing: var(--vn-tracking-normal); background: var(--vn-bg-app); }

h1 { font: var(--vn-font-h1); letter-spacing: var(--vn-tracking-tight); color: var(--vn-fg-1); }
h2 { font: var(--vn-font-h2); letter-spacing: var(--vn-tracking-tight); color: var(--vn-fg-1); }
h3 { font: var(--vn-font-h3); letter-spacing: var(--vn-tracking-normal); color: var(--vn-fg-1); }
h4 { font: var(--vn-font-h4); color: var(--vn-fg-1); }
h5 { font: var(--vn-font-h5); color: var(--vn-fg-1); }
h6 { font: var(--vn-font-h6); color: var(--vn-fg-1); }

p { font: var(--vn-font-body); color: var(--vn-fg-3); }
.lead { font: var(--vn-font-lead); color: var(--vn-fg-1); }
small, .caption { font: var(--vn-font-caption); color: var(--vn-fg-5); }
a { color: var(--vn-red); text-decoration: none; }
a:hover { text-decoration: underline; }