/* ═══════════════════════════════════════════════════════════════════════════
   agentalent.ai design tokens
   Source of truth for color, type, space, motion, and elevation.
   Load this before any page or component stylesheets.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* ── Brand (identity orange + neutrals) ── */
  --at-brand-500: #e95414;
  --at-brand-100: rgba(233, 84, 20, 0.08);
  --at-brand-200: rgba(233, 84, 20, 0.2);
  --at-ink-900: #1a1a1a;
  --at-ink-500: #6b6b68;
  --at-surface-0: #ffffff;
  --at-surface-1: #fafafa;
  --at-line: rgba(0, 0, 0, 0.08);
  --at-overlay-dark: rgba(0, 0, 0, 0.85);
  --at-overlay-blur: rgba(255, 255, 255, 0.85);

  /* Back-compat & semantic aliases (use in existing components) */
  --bg: var(--at-surface-0);
  --bg-subtle: var(--at-surface-1);
  --text: var(--at-ink-900);
  --accent: var(--at-brand-500);
  --accent-light: var(--at-brand-100);
  --accent-border: var(--at-brand-200);
  --muted: var(--at-ink-500);
  --border: var(--at-line);
  --at-on-primary: #ffffff;
  --at-ink-invert: #ffffff;
  --at-ink-invert-muted: rgba(255, 255, 255, 0.5);
  --at-hero-grid: 48px;
  --at-hero-fade: rgba(0, 0, 0, 0.04);

  /* ── Typography ── */
  --font-heading: 'Instrument Serif', serif;
  --font-body: 'Poppins', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --at-text-xs: 0.75rem;   /* 12px */
  --at-text-sm: 0.8125rem; /* 13px */
  --at-text-14: 0.875rem;  /* 14px */
  --at-text-base: 1rem;    /* 16px */
  --at-text-lg: 1.125rem;  /* 18px */
  --at-text-xl: 1.5rem;    /* 24px (roles) */
  --at-text-display-sm: 2.75rem;  /* 44 */
  --at-text-display: 3.5rem;      /* 56 */
  --at-text-display-hero: 4.5rem; /* 72 */
  --at-text-display-hero-sans: 4rem; /* 64 h1 Poppins */
  --at-lead: 1.6;
  --at-lead-tight: 1.0;
  --at-tracking-tight: -0.03em;
  --at-tracking-caps: 0.1em;
  --at-tracking-label: 0.12em;
  --at-uppercase-label: 0.1em;

  /* ── Spacing (4px base) ── */
  --at-space-0: 0;
  --at-space-1: 4px;
  --at-space-2: 8px;
  --at-space-3: 12px;
  --at-space-4: 16px;
  --at-space-5: 20px;
  --at-space-6: 24px;
  --at-space-7: 28px;
  --at-space-8: 32px;
  --at-space-9: 36px;
  --at-space-10: 40px;
  --at-space-12: 48px;
  --at-space-14: 56px;
  --at-space-16: 64px;
  --at-space-18: 72px;
  --at-space-20: 80px;
  --at-space-25: 100px;
  --at-gutter: 48px;
  --at-gutter-sm: 20px;
  --at-container: 1200px;
  --at-nav-h: 72px;
  --at-contact-scroll-margin: 80px;

  /* ── Corners ── */
  --at-radius-sm: 10px;
  --at-radius-md: 12px;
  --at-radius-lg: 16px;
  --at-pill: 100px;
  --at-radius-full: 50%;

  /* ── Elevation (accent-tinted where relevant) ── */
  --at-shadow-nav: 0 4px 16px rgba(233, 84, 20, 0.3);
  --at-shadow-cta: 0 4px 20px rgba(233, 84, 20, 0.3);
  --at-shadow-cta-lg: 0 8px 32px rgba(233, 84, 20, 0.4);
  --at-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.06);
  --at-shadow-play: 0 4px 24px rgba(233, 84, 20, 0.4);
  --at-shadow-play-lg: 0 6px 32px rgba(233, 84, 20, 0.55);
  --at-shadow-routing: 0 12px 40px rgba(233, 84, 20, 0.15);
  --at-shadow-focus: 0 0 0 3px var(--accent-light);
  --at-scrim: rgba(0, 0, 0, 0.85);

  /* ── Motion ── */
  --at-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --at-duration-1: 0.2s;
  --at-duration-2: 0.3s;
  --at-duration-3: 0.35s;
  --at-duration-4: 0.4s;
  --at-duration-5: 0.5s;
  --at-duration-7: 0.7s;

  /* ── Stacking ── */
  --at-z-nav: 100;
  --at-z-sticky: 200;
  --at-z-modal: 10000;

  /* ── UI rules (soft section dividers, under-hero line) ── */
  --at-rule-h: 1px;
  --at-rule-fade: 12%;
  --at-rule-fade-r: 88%;
  --at-rule-bg: linear-gradient(
    90deg,
    transparent,
    var(--border) var(--at-rule-fade),
    var(--border) var(--at-rule-fade-r),
    transparent
  );
  --at-section-after-rule: var(--at-space-12);
  /* Space between the hero’s soft line and “trusted by” (between 20–24 on 4px scale) */
  --at-hero-to-logos-pt: 1.375rem;
  --at-hero-to-logos-pb: var(--at-space-1);
  /* Narrow viewports: tighter to logos headline */
  --at-hero-to-logos-pt-m: 1.125rem;
  --at-hero-to-logos-pb-m: var(--at-space-9);

  /* ── Marketing / LP hero (e.g. sales) — use these for layout, not ad-hoc px ── */
  --at-lp-hero-max-w: var(--at-container);
  --at-lp-hero-pad-x: var(--at-gutter);
  --at-lp-hero-pad-x-sm: var(--at-gutter-sm);
  /* Air under the fixed nav, above eyebrow; above the trust / logos strip (compact band) */
  --at-lp-hero-below-nav: var(--at-space-5);
  --at-lp-hero-above-trust: var(--at-space-8);
  /* Column + image: more copy room, image column a bit lighter */
  --at-lp-hero-cols: minmax(0, 1.16fr) minmax(0, 0.98fr);
  --at-lp-hero-col-gap: clamp(var(--at-space-4), 3.5vw, var(--at-space-10));
  /* Tighter than before, but tall enough that cover + 86% scale still reads “zoomed out” */
  --at-lp-hero-layout-min: min(40vh, 28rem);
  --at-lp-hero-media-min: min(36vh, 24rem);
  --at-lp-hero-img-wrap-min: min(34vh, 22rem);
  --at-lp-hero-bleed-r: var(--at-gutter);
  --at-lp-hero-bleed-extra: var(--at-space-8);
  /* Slightly less wide bleed so the photo does not dominate */
  --at-lp-hero-bleed-vw: 54vw;
  /* Pull image to viewport edge: cap negative margin to design spacing */
  --at-lp-hero-bleed-edge: max(
    calc(-1 * var(--at-space-12)),
    calc(50% - 50vw)
  );
  /* Stacked / narrow */
  --at-lp-hero-stack-gap: var(--at-space-6);
  --at-lp-hero-img-mobile: min(36vh, 22rem);
  --at-lp-hero-img-wrap-mobile: min(32vh, 18rem);
  /* Headline + sub: slightly roomier “boxes” (width + a little type scale) */
  --at-lp-hero-h1-mb: var(--at-space-7);
  --at-lp-hero-h1-scale: 1;
  --at-lp-hero-sub: calc(var(--at-text-lg) * 1.05);
  --at-lp-hero-sub-max: min(100%, 44rem);
  /* Photo: zoomed out; center subject (face + upper body) */
  --at-lp-hero-img-scale: 86%;
  --at-lp-hero-img-focal: center 48%;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}