/* ══════════════════════════════════════════════════════════════
   VORASENSE DESIGN SYSTEM v1.0.0
   Based on BRAND-IDENTITY.md
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap');

:root {
  /* ══════════════════════════════════════════════════════════════
     COLORS - Vorasense Design System
     ══════════════════════════════════════════════════════════════ */

  /* Backgrounds */
  --vs-void: #0a0908;
  --vs-deep: #1a1614;
  --vs-bg: #211e1b;
  --vs-surface: #2d2926;
  --vs-elevated: #3a3632;
  --vs-hover: #4a4542;

  /* Text */
  --vs-text: #f5f0e8;
  --vs-text-secondary: #c9c2b5;
  --vs-text-muted: #a09788;     /* WCAG AA 4.6:1 contrast */
  --vs-text-faint: #6d6760;     /* WCAG AA 4.5:1 contrast */

  /* Accent */
  --vs-accent: #E69A47;
  --vs-accent-bright: #f0b366;
  --vs-accent-dim: #c97b30;
  --vs-accent-glow: rgba(230, 154, 71, 0.35);

  /* Risk Colors */
  --vs-safe: #7eb88a;
  --vs-safe-bg: rgba(126, 184, 138, 0.08);
  --vs-caution: #d4a574;
  --vs-caution-bg: rgba(212, 165, 116, 0.08);
  --vs-warning: #c97b5d;
  --vs-warning-bg: rgba(201, 123, 93, 0.08);
  --vs-danger: #c45c5c;
  --vs-danger-bg: rgba(196, 92, 92, 0.08);

  /* Borders */
  --vs-border: #3a3632;
  --vs-border-subtle: #2d2926;
  --vs-border-focus: var(--vs-accent);

  /* Typography */
  --vs-text-xs: 0.8125rem;   /* 13px */
  --vs-text-sm: 0.9375rem;   /* 15px */
  --vs-text-base: 1.0625rem; /* 17px */
  --vs-text-md: 1.1875rem;   /* 19px */
  --vs-text-lg: 1.375rem;    /* 22px */
  --vs-text-xl: 1.625rem;    /* 26px */
  --vs-text-2xl: 2.125rem;   /* 34px */
  --vs-text-3xl: 2.75rem;    /* 44px */

  /* Spacing Scale */
  --vs-space-xs: 0.25rem;
  /* 4px */
  --vs-space-sm: 0.5rem;
  /* 8px */
  --vs-space-md: 1rem;
  /* 16px */
  --vs-space-lg: 1.5rem;
  /* 24px */
  --vs-space-xl: 2rem;
  /* 32px */
  --vs-space-2xl: 3rem;
  /* 48px */
  --vs-space-3xl: 4rem;
  /* 64px */
  --vs-space-4xl: 6rem;
  /* 96px */

  /* Border Radius */
  --vs-radius-sm: 8px;
  --vs-radius-md: 12px;
  --vs-radius-lg: 18px;
  --vs-radius-xl: 24px;
  --vs-radius-2xl: 32px;
  --vs-radius-full: 999px;

  /* Shadows */
  --vs-shadow-sm: 0 2px 8px rgba(10, 9, 8, 0.15);
  --vs-shadow-md: 0 8px 24px rgba(10, 9, 8, 0.25);
  --vs-shadow-lg: 0 20px 45px rgba(10, 9, 8, 0.35);
  --vs-shadow-xl: 0 26px 60px rgba(10, 9, 8, 0.4);
  --vs-shadow-glow: 0 0 30px var(--vs-accent-glow);

  /* Transitions */
  --vs-transition-fast: 200ms ease-out;
  --vs-transition: 300ms ease-out;
  --vs-transition-slow: 500ms ease-out;
  --vs-transition-gentle: 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ══════════════════════════════════════════════════════════════ */

/* Text Utilities */
.vs-text-center {
  text-align: center;
}

.vs-text-left {
  text-align: left;
}

.vs-text-right {
  text-align: right;
}

/* Display */
.vs-flex {
  display: flex;
}

.vs-grid {
  display: grid;
}

.vs-inline-flex {
  display: inline-flex;
}

/* Flex Utilities */
.vs-flex-col {
  flex-direction: column;
}

.vs-flex-wrap {
  flex-wrap: wrap;
}

.vs-items-center {
  align-items: center;
}

.vs-items-start {
  align-items: flex-start;
}

.vs-justify-center {
  justify-content: center;
}

.vs-justify-between {
  justify-content: space-between;
}

/* Gap */
.vs-gap-xs {
  gap: var(--vs-space-xs);
}

.vs-gap-sm {
  gap: var(--vs-space-sm);
}

.vs-gap-md {
  gap: var(--vs-space-md);
}

.vs-gap-lg {
  gap: var(--vs-space-lg);
}

.vs-gap-xl {
  gap: var(--vs-space-xl);
}

/* ══════════════════════════════════════════════════════════════
   COMPONENT CLASSES
   ══════════════════════════════════════════════════════════════ */

/* Buttons */
.vs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.7rem;
  border-radius: var(--vs-radius-full);
  font-weight: 600;
  font-size: var(--vs-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  transition: all var(--vs-transition);
  cursor: pointer;
  text-decoration: none;
}

.vs-button--primary {
  background: var(--vs-accent);
  color: var(--vs-void);
  box-shadow: 0 12px 30px var(--vs-accent-glow);
}

.vs-button--primary:hover,
.vs-button--primary:focus-visible {
  background: var(--vs-accent-bright);
  color: var(--vs-void);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px var(--vs-accent-glow);
}

.vs-button--secondary {
  border-color: rgba(245, 240, 232, 0.2);
  background: rgba(10, 9, 8, 0.2);
  color: var(--vs-text);
}

.vs-button--secondary:hover,
.vs-button--secondary:focus-visible {
  border-color: var(--vs-accent);
  background: rgba(10, 9, 8, 0.3);
}

.vs-button--ghost {
  background: transparent;
  color: var(--vs-text-secondary);
}

.vs-button--ghost:hover {
  background: rgba(245, 240, 232, 0.05);
  color: var(--vs-text);
}

.vs-button--full {
  width: 100%;
}

/* Cards */
.vs-card {
  background: linear-gradient(160deg, rgba(45, 41, 38, 0.7) 0%, rgba(33, 30, 27, 0.85) 100%);
  border-radius: var(--vs-radius-lg);
  padding: var(--vs-space-lg);
  border: 1px solid rgba(245, 240, 232, 0.08);
  box-shadow: var(--vs-shadow-md);
  transition: all var(--vs-transition);
}

.vs-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vs-shadow-lg);
}

/* Inputs */
.vs-input,
.vs-select,
.vs-textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: var(--vs-radius-md);
  border: 1px solid rgba(245, 240, 232, 0.12);
  background: rgba(10, 9, 8, 0.35);
  color: var(--vs-text);
  font-size: var(--vs-text-base);
  font-family: 'Source Sans 3', sans-serif;
  transition: all var(--vs-transition);
}

.vs-input:focus,
.vs-select:focus,
.vs-textarea:focus {
  outline: 2px solid rgba(212, 165, 116, 0.4);
  outline-offset: 2px;
  border-color: var(--vs-accent);
}

/* Social Login Buttons */
.vs-social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--vs-radius-md);
  font-weight: 500;
  font-size: var(--vs-text-base);
  border: 1px solid rgba(245, 240, 232, 0.15);
  background: rgba(45, 41, 38, 0.6);
  color: var(--vs-text);
  transition: all var(--vs-transition);
  cursor: pointer;
  text-decoration: none;
}

.vs-social-button:hover {
  background: rgba(45, 41, 38, 0.8);
  border-color: var(--vs-accent);
  transform: translateY(-1px);
}

.vs-social-button img,
.vs-social-button svg {
  width: 20px;
  height: 20px;
}

/* Download Badge — See vorasense-pages.css for enhanced implementation */

/* Testimonial */
.vs-testimonial {
  background: rgba(45, 41, 38, 0.5);
  border-left: 3px solid var(--vs-accent);
  padding: var(--vs-space-lg);
  border-radius: var(--vs-radius-md);
}

.vs-testimonial__quote {
  font-style: italic;
  color: var(--vs-text-secondary);
  margin-bottom: var(--vs-space-md);
}

.vs-testimonial__author {
  font-weight: 600;
  color: var(--vs-accent);
}

/* Divider */
.vs-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212, 165, 116, 0.4) 50%, transparent 100%);
  opacity: 0.5;
  margin: var(--vs-space-2xl) 0;
}

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════ */

@keyframes vs-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vs-stagger-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.vs-animate-fade-in {
  animation: vs-fade-in 0.5s var(--vs-transition-gentle);
}

.vs-stagger-1 {
  animation: vs-stagger-in 0.4s ease-out;
  animation-delay: 0ms;
}

.vs-stagger-2 {
  animation: vs-stagger-in 0.4s ease-out;
  animation-delay: 80ms;
}

.vs-stagger-3 {
  animation: vs-stagger-in 0.4s ease-out;
  animation-delay: 160ms;
}

.vs-stagger-4 {
  animation: vs-stagger-in 0.4s ease-out;
  animation-delay: 240ms;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE UTILITIES
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .vs-md-flex-col {
    flex-direction: column;
  }

  .vs-md-text-center {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .vs-sm-full {
    width: 100%;
  }

  .vs-sm-flex-col {
    flex-direction: column;
  }
}