/* ==========================================================
   VersaForge Design Tokens
   ----------------------------------------------------------
   Extracted 1:1 from the CEO-approved homepage. No new visual
   values are introduced -every variable mirrors an existing
   color/spacing/radius/shadow already in production use.

   Pruned to only the tokens actually consumed by the reusable
   component classes in style.css (search "DESIGN SYSTEM
   COMPONENTS"). Add a variable here only when a second real
   consumer exists -see AUDIT_AND_DESIGN_SYSTEM.md for the
   full palette/scale inventory if you need values that aren't
   tokenized yet (most of the page still references hex values
   directly, which is fine -see audit for why).
   ========================================================== */

:root {

  /* Brand gradient (used by .vf-btn-primary) */
  --vf-brand-violet:       #6A58E4;
  --vf-brand-violet-hover: #5A47DD;
  --vf-brand-blue:         #4A86F5;
  --vf-brand-blue-hover:   #3F74F2;

  /* Surfaces & border (used by .vf-card, .vf-*-tile, .vf-stat-chip, .vf-info-row-card) */
  --vf-border:       #E6ECF5;
  --vf-surface:      #FFFFFF;
  --vf-surface-tint: #F8FAFF;

  /* Typography (used by .vf-heading-2; see AUDIT §4 re: Outfit vs Inter) */
  --vf-font-display: 'Inter', sans-serif;

  /* Radius scale (used across every .vf-* component) */
  --vf-radius-xl:   1rem;    /* Tailwind rounded-2xl */
  --vf-radius-2xl:  1.5rem;  /* Tailwind rounded-3xl */
  --vf-radius-full: 9999px;

  /* Shadow scale (used by .vf-card, .vf-stat-chip, .vf-info-row-card, .vf-glass-card) */
  --vf-shadow-sm:   0 1px 2px 0 rgba(0,0,0,.05);
  --vf-shadow-card: 0 20px 60px -15px rgba(106,88,228,0.08);

  /* Section rhythm (used by .vf-section-y) */
  --vf-section-py-mobile:  6rem; /* py-24 */
  --vf-section-py-desktop: 8rem; /* sm:py-32 */

  /* Motion (used by .vf-btn-primary, .vf-glass-card) */
  --vf-duration-base: 300ms;
}