/* ============================================================
   MoveClerk Futuristic — shared design tokens (2026-10-03)
   Dark-forward theme for the whole site. One theme, done right.
   Pages/components consume these --ft-* tokens; component CSS
   lives in futuristic-login.css / futuristic-app.css, and the
   five marketing pages inline their own <style> blocks on top
   of these tokens. System font stack only — no external fonts.
   ============================================================ */
:root {
  /* Surfaces (deep space blues, never pure black) */
  --ft-bg:        #060a14;   /* page background */
  --ft-bg-2:      #0b1226;   /* raised surface */
  --ft-card:      #101a33;   /* solid card */
  --ft-glass:     rgba(16, 26, 51, 0.66);  /* glassmorphism surface */
  --ft-glass-hi:  rgba(20, 32, 62, 0.78);

  /* Text — high contrast for sunlight readability */
  --ft-ink:       #f2f5fb;   /* primary text */
  --ft-muted:     #9da9c2;   /* secondary text (≥4.5:1 on --ft-bg-2) */
  --ft-faint:     #7b87a3;   /* tertiary / captions only, never body (≥4.5:1 on --ft-bg) */
  /* Bug sweep #24: dark text for gradient surfaces — white on the
     blue→cyan gradient fails AA, so gradient CTAs/badges/steps use this. */
  --ft-ink-on-grad: #06121f; /* on --ft-grad stops: blue 5.86:1, cyan 12.01:1, mid 8.42:1 */

  /* Hairlines & highlights */
  --ft-line:      rgba(148, 178, 255, 0.14);
  --ft-line-soft: rgba(148, 178, 255, 0.08);
  --ft-hi:        inset 0 1px 0 rgba(255, 255, 255, 0.07); /* top highlight */

  /* Accents — electric blue / cyan */
  --ft-blue:      #4f8cff;
  --ft-blue-deep: #2f6de0;
  --ft-cyan:      #38e1ff;
  --ft-grad:      linear-gradient(135deg, #4f8cff 0%, #38e1ff 100%);
  --ft-grad-soft: linear-gradient(135deg, rgba(79,140,255,.22), rgba(56,225,255,.12));

  /* Glows (use sparingly — CTAs, active states, hero accents) */
  --ft-glow:      0 0 26px rgba(79, 140, 255, 0.42);
  --ft-glow-soft: 0 0 16px rgba(56, 225, 255, 0.22);
  --ft-glow-btn:  0 6px 22px rgba(79, 140, 255, 0.38);

  /* Status (dark-adapted, no orange) */
  --ft-ok:        #34d399;
  --ft-warn:      #fbbf24;
  --ft-danger:    #f87171;

  /* Shape & motion */
  --ft-radius:    18px;
  --ft-radius-sm: 12px;
  --ft-ease:      0.18s ease;
  --ft-ease-out:  0.28s cubic-bezier(0.22, 1, 0.36, 1);

  /* Ambient hero mesh (marketing / login backgrounds) */
  --ft-mesh:
    radial-gradient(720px 380px at 12% -4%, rgba(79, 140, 255, 0.20), transparent 62%),
    radial-gradient(640px 360px at 88% 6%, rgba(56, 225, 255, 0.13), transparent 60%),
    radial-gradient(900px 520px at 50% 110%, rgba(47, 109, 224, 0.14), transparent 65%);
}

/* Focus visibility everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ft-cyan);
  outline-offset: 2px;
}
/* Reduced motion: kill the futurism's movement, keep its looks */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Bug sweep #29: skip link for keyboard users on public pages. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:#0c1f44;color:#fff;padding:12px 20px;font-weight:700;border-radius:0 0 10px 0;text-decoration:none}
.skip-link:focus{left:0}