/*
 * Design Tokens & Foundations
 * CSS Variables, Typography, Spacing, Shadows, Accessibility
 */

/* ===== CSS Variables for Gradients & Accents ===== */
:root {
  /* Font families */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Typographic scale (mobile → desktop) */
  --text-xs: clamp(0.7rem, 0.68rem + 0.1vw, 0.75rem);      /* 11.2px → 12px */
  --text-sm: clamp(0.8rem, 0.78rem + 0.15vw, 0.9rem);      /* 12.8px → 14.4px */
  --text-md: clamp(0.85rem, 0.83rem + 0.2vw, 1rem);        /* 13.6px → 16px */
  --text-lg: clamp(0.95rem, 0.93rem + 0.25vw, 1.1rem);     /* 15.2px → 17.6px */
  --text-xl: clamp(1.1rem, 1.05rem + 0.4vw, 1.3rem);       /* 17.6px → 20.8px */
  --text-2xl: clamp(1.3rem, 1.2rem + 0.6vw, 1.8rem);       /* 20.8px → 28.8px */
  --text-3xl: clamp(1.8rem, 1.5rem + 1vw, 2.4rem);         /* 28.8px → 38.4px */
  --text-4xl: clamp(2.2rem, 1.8rem + 1.5vw, 3.2rem);       /* 35.2px → 51.2px */

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* Radius scale */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-full: 999px; /* For fully rounded elements */

  /* Shadow scale */
  --shadow-sm: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-md: 0 12px 35px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 70px rgba(0,0,0,0.65);
  --shadow-hero: 0 40px 120px rgba(0,0,0,0.60);

  /* Accent colors */
  --accent-primary: #38bdf8;           /* cyan */
  --accent-primary-rgb: 56, 189, 248;  /* for rgba() */
  --accent-secondary: #7b61ff;          /* purple */
  --accent-secondary-rgb: 123, 97, 255; /* for rgba() */
  --accent-cyan: #48c6ff;               /* lighter cyan */
  --accent-cyan-rgb: 72, 198, 255;      /* for rgba() */
  --accent-soft-bg: rgba(56, 189, 248, 0.08);
  --accent-soft-bg-strong: rgba(56, 189, 248, 0.12);

  /* Gradients */
  --grad-accent: linear-gradient(90deg, #48c6ff, #7b61ff);
  --grad-accent-vertical: linear-gradient(180deg, #48c6ff, #7b61ff);
  --grad-accent-diagonal: linear-gradient(135deg, #22d3ee, #6366f1);
  --grad-pill-muted: radial-gradient(circle at top left, rgba(148, 163, 184, 0.18), rgba(15, 23, 42, 0.6));
  --grad-pill-muted-hover: radial-gradient(circle at top left, rgba(148, 163, 184, 0.25), rgba(15, 23, 42, 0.7));
  --grad-feature-icon: radial-gradient(circle at 30% 20%, rgba(56, 189, 248, 0.35), rgba(15, 23, 42, 0.9));
  --grad-feature-icon-strong: radial-gradient(circle at 30% 20%, rgba(56, 189, 248, 0.5), rgba(15, 23, 42, 0.95));
  --grad-feature-icon-weak: radial-gradient(circle at 30% 20%, rgba(56, 189, 248, 0.28), rgba(15, 23, 42, 0.96));
  --grad-feature-icon-medium: radial-gradient(circle at 30% 20%, rgba(56, 189, 248, 0.4), rgba(15, 23, 42, 0.95));
  --grad-feature-icon-avatar: radial-gradient(circle at 30% 20%, rgba(56, 189, 248, 0.45), rgba(15, 23, 42, 0.95));
  --grad-feature-highlight: radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), rgba(15, 23, 42, 0.98));
}

/* ===== Typography System ===== */
.text-eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

.text-body {
  font-size: var(--text-md);
  line-height: 1.6;
}

.text-body-sm {
  font-size: var(--text-sm);
  line-height: 1.6;
}

.text-heading-1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.1;
}

.text-heading-2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.2;
}

.text-heading-3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
}

/* ===== Accessibility: Focus States ===== */
.btn:focus-visible,
.site-nav__link:focus-visible,
.site-header__logo:focus-visible,
.site-footer__link:focus-visible,
.faq-question:focus-visible,
.trusted-by-arrow:focus-visible,
.testimonial-google-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== Prefers Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .trusted-by-track {
    animation: none !important;
    transform: translateX(0) !important;
  }
}