/* VAssistly Design System — Bundled Stylesheet */

/* VAssistly Color Tokens */
:root {
  /* Brand Primaries */
  --color-primary:        #0F3DFF;
  --color-navy:           #081C3A;
  --color-purple:         #6C4DFF;
  --color-cyan:           #29D8FF;
  --color-lavender:       #B9A7FF;

  /* Neutrals */
  --color-white:          #FFFFFF;
  --color-gray-50:        #F4F7FB;
  --color-gray-200:       #E2E8F0;
  --color-gray-400:       #7B8595;
  --color-gray-800:       #1E2433;
  --color-black:          #050D1A;

  /* Semantic */
  --color-bg-dark:        var(--color-navy);
  --color-bg-light:       var(--color-white);
  --color-bg-subtle:      var(--color-gray-50);
  --color-text-primary:   var(--color-navy);
  --color-text-body:      var(--color-gray-800);
  --color-text-muted:     var(--color-gray-400);
  --color-text-inverse:   var(--color-white);
  --color-accent:         var(--color-cyan);
  --color-interactive:    var(--color-primary);
  --color-interactive-hover: #0030DD;
  --color-border:         var(--color-gray-200);
  --color-border-subtle:  rgba(15, 61, 255, 0.15);

  /* Status */
  --color-success:        #22C55E;
  --color-warning:        #F59E0B;
  --color-error:          #EF4444;
  --color-info:           var(--color-cyan);
}


/* VAssistly Typography Tokens */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=Sora:wght@300;400;500;600;700&display=swap');

:root {
  /* Font Families */
  --font-display:   'Space Grotesk', sans-serif;   /* Primary — headings, display */
  --font-body:      'Inter', 'Sora', sans-serif;   /* Secondary — body, UI text */

  /* Font Weights */
  --fw-regular:     400; /* @kind font */
  --fw-medium:      500; /* @kind font */
  --fw-semibold:    600; /* @kind font */
  --fw-bold:        700; /* @kind font */

  /* Font Sizes */
  --text-xs:        0.75rem;    /* 12px */
  --text-sm:        0.875rem;   /* 14px */
  --text-base:      1rem;       /* 16px */
  --text-lg:        1.125rem;   /* 18px */
  --text-xl:        1.25rem;    /* 20px */
  --text-2xl:       1.5rem;     /* 24px */
  --text-3xl:       1.875rem;   /* 30px */
  --text-4xl:       2.25rem;    /* 36px */
  --text-5xl:       3rem;       /* 48px */
  --text-6xl:       3.75rem;    /* 60px */
  --text-7xl:       4.5rem;     /* 72px */

  /* Line Heights */
  --leading-tight:  1.2; /* @kind other */
  --leading-snug:   1.35; /* @kind other */
  --leading-normal: 1.5; /* @kind other */
  --leading-relaxed:1.65; /* @kind other */

  /* Letter Spacing */
  --tracking-tight:  -0.02em; /* @kind other */
  --tracking-normal:  0; /* @kind other */
  --tracking-wide:   0.05em; /* @kind other */
  --tracking-wider:  0.1em; /* @kind other */
  --tracking-widest: 0.15em; /* @kind other */

  /* Semantic Aliases */
  --type-hero:        var(--font-display); /* @kind font */
  --type-heading:     var(--font-display); /* @kind font */
  --type-subheading:  var(--font-display); /* @kind font */
  --type-body:        var(--font-body);    /* @kind font */
  --type-label:       var(--font-body);    /* @kind font */
  --type-caption:     var(--font-body);    /* @kind font */
}


/* VAssistly Spacing Tokens */
:root {
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Container */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}


/* VAssistly Gradient Tokens */
:root {
  /* Brand Gradients */
  --gradient-primary:     linear-gradient(135deg, #0F3DFF 0%, #6C4DFF 100%); /* @kind color */
  --gradient-primary-h:   linear-gradient(135deg, #0030DD 0%, #5A3DE8 100%); /* @kind color */
  --gradient-dark:        linear-gradient(135deg, #081C3A 0%, #0F3DFF 50%, #6C4DFF 100%); /* @kind color */
  --gradient-cyan:        linear-gradient(135deg, #29D8FF 0%, #0F3DFF 100%); /* @kind color */
  --gradient-hero-bg:     linear-gradient(160deg, #081C3A 0%, #0A1F4A 60%, #12064A 100%); /* @kind color */

  /* Overlay / Tints */
  --gradient-overlay-dark: linear-gradient(to bottom, rgba(8,28,58,0) 0%, rgba(8,28,58,0.85) 100%); /* @kind color */
  --gradient-glow-blue:   radial-gradient(circle at center, rgba(15,61,255,0.25) 0%, transparent 70%); /* @kind color */
  --gradient-glow-purple: radial-gradient(circle at center, rgba(108,77,255,0.2) 0%, transparent 70%); /* @kind color */

  /* Card / Glass */
  --gradient-card-dark:   linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); /* @kind color */
  --gradient-shimmer:     linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%); /* @kind color */
}


/* VAssistly Shadow Tokens */
:root {
  /* Elevation */
  --shadow-sm:   0 1px 3px rgba(8,28,58,0.08), 0 1px 2px rgba(8,28,58,0.05);
  --shadow-md:   0 4px 12px rgba(8,28,58,0.10), 0 2px 4px rgba(8,28,58,0.06);
  --shadow-lg:   0 10px 30px rgba(8,28,58,0.12), 0 4px 8px rgba(8,28,58,0.08);
  --shadow-xl:   0 20px 50px rgba(8,28,58,0.16), 0 8px 16px rgba(8,28,58,0.10);

  /* Glow (dark bg) */
  --shadow-glow-blue:   0 0 24px rgba(15,61,255,0.4), 0 0 60px rgba(15,61,255,0.15);
  --shadow-glow-purple: 0 0 24px rgba(108,77,255,0.35), 0 0 60px rgba(108,77,255,0.12);
  --shadow-glow-cyan:   0 0 16px rgba(41,216,255,0.45);

  /* Card on dark */
  --shadow-card-dark:   0 2px 16px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.25);
  --shadow-card-glass:  inset 0 1px 0 rgba(255,255,255,0.08);
}