/*
 * FlowStack design tokens + self-hosted Inter + base primitives.
 * Loaded first (before components.css). Variables only; no component styles here.
 * Scoped resets are intentionally minimal so Elementor / wp-admin stay untouched.
 */

/* ============================================================
   TOKENS  (FlowStack brand + GHL-inspired dark system)
   ============================================================ */
:root {
  /* Core brand */
  --fs-navy:          #0A1628;
  --fs-deep:          #0F1D32;
  --fs-hero-bg:       #050E1F;
  --fs-blue:          #4285F4;
  --fs-blue-hover:    #2D6CE0;
  --fs-blue-light:    rgba(66,133,244,0.10);
  --fs-blue-600:      #2563EB;
  --fs-indigo:        #6366F1;
  --fs-cyan:          #22D3EE;
  --fs-surface:       #F8FAFC;
  --fs-white:         #FFFFFF;
  --fs-body:          #374151;
  --fs-muted:         #64748B;
  --fs-subtle:        #94A3B8;
  --fs-faint:         #CBD5E1;
  --fs-border:        #E2E8F0;
  --fs-success:       #10B981;
  --fs-amber:         #F59E0B;
  --fs-red:           #EF4444;

  /* GHL-inspired announcement bar */
  --fs-announce-bg:   #2563EB;
  --fs-announce-btn:  #F59E0B;

  /* Gradients */
  --fs-grad-btn:      linear-gradient(135deg, #4285F4 0%, #2D6CE0 100%);
  --fs-grad-text:     linear-gradient(135deg, #4285F4 0%, #60A5FA 60%, #93C5FD 100%);
  --fs-grad-hero:     linear-gradient(165deg, #050E1F 0%, #0A1628 40%, #0F2847 70%, #122D5E 100%);
  --fs-grad-dark:     linear-gradient(160deg, #070D1A 0%, #0A1628 60%, #0C1E3C 100%);
  --fs-grad-cyan:     linear-gradient(135deg, #0A1628 0%, #0F2847 50%, #164E7A 100%);

  /* Shadows */
  --fs-shadow-xs:     0 1px 3px rgba(10,22,40,.06);
  --fs-shadow-sm:     0 2px 8px rgba(10,22,40,.08);
  --fs-shadow:        0 4px 24px rgba(10,22,40,.10);
  --fs-shadow-lg:     0 12px 48px rgba(10,22,40,.18);
  --fs-shadow-blue:   0 8px 32px rgba(66,133,244,0.25);

  /* Typography */
  --fs-font:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-text-xs:       0.75rem;
  --fs-text-sm:       0.875rem;
  --fs-text-base:     1rem;
  --fs-text-lg:       1.125rem;
  --fs-text-xl:       1.25rem;
  --fs-text-2xl:      1.5rem;
  --fs-text-3xl:      1.875rem;
  --fs-text-hero:     clamp(2.5rem, 1.55rem + 4.2vw, 4rem);

  /* Spacing */
  --fs-space-xs:      0.5rem;
  --fs-space-sm:      0.75rem;
  --fs-space-md:      1rem;
  --fs-space-lg:      1.5rem;
  --fs-space-xl:      2rem;
  --fs-space-2xl:     3rem;
  --fs-space-3xl:     clamp(3rem, 2rem + 4vw, 5rem);
  --fs-space-section: clamp(4rem, 3rem + 4vw, 7rem);

  /* Container */
  --fs-container:        1200px;
  --fs-container-narrow: 880px;
  --fs-header-h:         72px;
  --fs-announce-h:       48px;

  /* Radii */
  --fs-radius-sm:  6px;
  --fs-radius:     10px;
  --fs-radius-lg:  16px;
  --fs-radius-xl:  24px;
  --fs-radius-2xl: 32px;
  --fs-radius-pill: 999px;

  /* Motion */
  --fs-dur:    240ms;
  --fs-ease:   cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index */
  --fs-z-announce:   110;
  --fs-z-header:     100;
  --fs-z-mobile:     200;
  --fs-z-sticky-bar: 90;
}


/* Base typography (scoped to .fs-theme on body) */
body.fs-theme {
  font-family: var(--fs-font);
  color: var(--fs-body);
  background: var(--fs-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fs {
  font-family: var(--fs-font);
  color: var(--fs-body);
  line-height: 1.6;
  font-size: var(--fs-text-base);
}

.fs *, .fs *::before, .fs *::after { box-sizing: border-box; }
.fs h1, .fs h2, .fs h3, .fs h4 { color: var(--fs-navy); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.fs p { margin: 0; }
.fs a { color: inherit; text-decoration: none; }
.fs img { max-width: 100%; height: auto; display: block; }

/* Accessible focus ring */
.fs :focus-visible,
body.fs-theme a:focus-visible,
body.fs-theme button:focus-visible {
  outline: 3px solid var(--fs-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scroll reveal */
.fs .reveal-el {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.65s var(--fs-ease), transform 0.65s var(--fs-ease);
  will-change: opacity, transform;
}
.fs .reveal-el.is-visible { opacity: 1; transform: none; }
.fs-grid .reveal-el:nth-child(2) { transition-delay: 0.1s; }
.fs-grid .reveal-el:nth-child(3) { transition-delay: 0.2s; }
.fs-grid .reveal-el:nth-child(4) { transition-delay: 0.3s; }

.no-js .fs .reveal-el { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fs .reveal-el { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fs *, .fs *::before, .fs *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visually-hidden utility */
.fs .fs-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}