/* ============================================================
   RentAHuman — colors, typography, motion tokens
   ============================================================
   Dark futuristic SaaS. Indigo / cyan / pink. Glass-morphism.
   Use these tokens via var(--token) instead of hard-coding.
   ============================================================ */

:root {
  /* ---------- Palette: brand indigo scale ---------- */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8; /* hero accent text */
  --brand-500: #6366f1; /* primary CTA fill */
  --brand-600: #4f46e5; /* CTA hover */
  --brand-700: #4338ca;

  /* ---------- Palette: co-leads ---------- */
  --cyan-300:  #67e8f9;
  --cyan-400:  #22d3ee;
  --cyan-500:  #06b6d4;
  --pink-400:  #f472b6;
  --pink-500:  #ec4899;

  /* ---------- Palette: semantics ---------- */
  --success-300: #6ee7b7;
  --success-400: #34d399;
  --success-500: #10b981; /* emerald — accent */
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b; /* amber — docs / stars */
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6; /* file-manager */
  --danger-400: #f87171;
  --danger-500: #ef4444; /* human-secretary column */
  --blue-400:   #60a5fa;
  --blue-500:   #3b82f6; /* developer API */

  /* ---------- Surfaces (zinc dark) ---------- */
  --surface-base: #09090b; /* body */
  --surface-50:   #18181b; /* raised cards, modals */
  --surface-100:  #1c1c20; /* form fields */
  --surface-200:  #27272a; /* input bg, hovered tiles */

  /* ---------- Foreground / text ---------- */
  --fg-1: #fafafa;        /* headings, primary text */
  --fg-2: #d4d4d8;        /* zinc-300 — body strong */
  --fg-3: #a1a1aa;        /* zinc-400 — body */
  --fg-4: #71717a;        /* zinc-500 — meta */
  --fg-5: #52525b;        /* zinc-600 — muted captions */

  /* ---------- Borders / hairlines ---------- */
  --border-faint:    rgba(255, 255, 255, 0.05);
  --border-subtle:   rgba(255, 255, 255, 0.06);
  --border-strong:   rgba(255, 255, 255, 0.10);
  --border-stronger: rgba(255, 255, 255, 0.12);

  /* ---------- Glass surfaces ---------- */
  --glass-bg:       rgba(255, 255, 255, 0.03);
  --glass-bg-hover: rgba(255, 255, 255, 0.06);
  --glass-border:        rgba(255, 255, 255, 0.06);
  --glass-border-hover:  rgba(255, 255, 255, 0.12);
  --glass-blur: 12px;

  /* ---------- Glow shadows ---------- */
  --glow-brand:  0 0 60px rgba(99, 102, 241, 0.20), 0 0 120px rgba(99, 102, 241, 0.05);
  --glow-cyan:   0 0 60px rgba(6, 182, 212, 0.15),  0 0 120px rgba(6, 182, 212, 0.05);
  --glow-pink:   0 0 60px rgba(236, 72, 153, 0.15), 0 0 120px rgba(236, 72, 153, 0.05);
  --pulse-soft:  0 0 20px rgba(99, 102, 241, 0.30);
  --pulse-loud:  0 0 40px rgba(99, 102, 241, 0.60);

  /* ---------- Signature gradients ---------- */
  --grad-shimmer: linear-gradient(135deg, #818cf8 0%, #06b6d4 50%, #818cf8 100%);
  --grad-aurora:  linear-gradient(90deg,
                    transparent 0%,
                    rgba(129, 140, 248, 0.5) 30%,
                    rgba(6, 182, 212, 0.5)   50%,
                    rgba(236, 72, 153, 0.5)  70%,
                    transparent 100%);
  --grad-progress: linear-gradient(90deg, #818cf8, #06b6d4, #ec4899);
  --grad-soundwave: linear-gradient(to top, #06b6d4, #818cf8);
  --grad-card-tint: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(6,182,212,0.10));

  /* ---------- Typography ---------- */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* Display scale */
  --fs-h1: clamp(2.75rem, 5vw + 1rem, 4.5rem);  /* 44–72 */
  --fs-h2: clamp(2.25rem, 3vw + 1rem, 3rem);    /* 36–48 */
  --fs-h3: 1.25rem;   /* 20 */
  --fs-h4: 1.125rem;  /* 18 */

  /* Body scale */
  --fs-lead:  1.25rem; /* 20 */
  --fs-body:  0.9375rem; /* 15 */
  --fs-body-lg: 1.0625rem; /* 17 */
  --fs-small: 0.8125rem; /* 13 */
  --fs-xs:    0.75rem;   /* 12 */
  --fs-eyebrow: 0.6875rem; /* 11 */

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.08em;

  /* ---------- Spacing scale ---------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  1.75rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ---------- Radii ---------- */
  --r-sm:    8px;   /* small chips, inline tags */
  --r-md:    12px;  /* inputs, icon tiles, code-snippet box */
  --r-lg:    16px;  /* cards */
  --r-xl:    24px;  /* mega-CTA */
  --r-pill:  9999px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear: linear;

  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    300ms;
  --dur-reveal:  800ms;
  --dur-shimmer: 6s;
  --dur-drift-1: 18s;
  --dur-drift-2: 22s;
  --dur-drift-3: 26s;
  --dur-wave:    1.2s;
  --dur-pulse:   2s;

  /* ---------- Layout ---------- */
  --container: 80rem;       /* 1280 */
  --container-narrow: 48rem;
  --header-h: 64px;
  --progress-h: 3px;
}

/* ============================================================
   Semantic shorthands
   ============================================================ */

body {
  background: var(--surface-base);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.lead {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lead);
  color: var(--fg-2);
  line-height: var(--lh-normal);
}
p {
  color: var(--fg-3);
  line-height: var(--lh-relaxed);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-300);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* Numbers should always be tabular */
.tabular, .stat-value, [data-counter] {
  font-variant-numeric: tabular-nums;
}

/* Gradient text accent */
.gradient-text {
  background: var(--grad-shimmer);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer var(--dur-shimmer) ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Glass card primitive */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--r-lg);
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .glass-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    transform: translateY(-2px);
  }
}

/* Press feedback — global */
button, .btn, [role="button"] {
  transition:
    transform var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}
button:active, .btn:active, [role="button"]:active {
  transform: scale(0.97);
}