/* Nas Talent — shared design tokens and base components.
 *
 * Baseline is the main site's look (Hanken Grotesk body, Schibsted Grotesk headings, #5B45E0 purple).
 * Pages and components should reference these variables instead of introducing new values.
 * Campaign sections and the EOR demo may differ on purpose; they still use the tokens for focus,
 * errors, buttons and form fields.
 */
:root {
  /* typography */
  --nt-font-body: 'Hanken Grotesk', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --nt-font-heading: 'Schibsted Grotesk', 'Hanken Grotesk', -apple-system, system-ui, sans-serif;
  --nt-text-xs: 12.5px; --nt-text-sm: 14px; --nt-text-md: 15.5px; --nt-text-lg: 17px; --nt-leading: 1.6;
  --nt-text-h2: clamp(28px, 3.6vw, 42px);   /* section headings: Schibsted 700, -0.025em */
  --nt-text-h3: 28px;                       /* card headings: Schibsted 700, -0.02em */

  /* colour */
  --nt-purple: #5B45E0;            /* brand primary: 6.2:1 on white */
  --nt-purple-strong: #4A36C7;     /* hover / text-on-tint: 8.0:1 on white */
  --nt-purple-tint: #F4F1FE;
  --nt-purple-line: #E5DFFA;
  --nt-ink: #12131A;               /* body text */
  --nt-muted: #4B4F5C;             /* supporting text: 8.3:1 on white (replaces #8A8DA0 / #9A9DA8) */
  --nt-subtle: #5F6371;            /* captions: 6.1:1 on white */
  --nt-line: #E2E2E8;
  --nt-line-strong: #C9C8D6;
  --nt-hover: #F1F0F6;             /* hover fills, segmented-control track */
  --nt-bg: #FFFFFF;
  --nt-bg-soft: #FAFAFB;
  --nt-dark: #12131A;
  --nt-error: #B42318;             /* 6.5:1 on white */
  --nt-error-bg: #FEF3F2;
  --nt-success: #0F7A4F;           /* 5.6:1 on white */
  --nt-success-bg: #E9F7F0;
  --nt-focus: #A99CF6;

  /* spacing / widths / radii / shadow */
  --nt-space-1: 4px; --nt-space-2: 8px; --nt-space-3: 12px; --nt-space-4: 16px; --nt-space-5: 24px; --nt-space-6: 32px; --nt-space-7: 48px; --nt-space-8: 72px;
  --nt-gutter: 28px; --nt-gutter-sm: 16px;
  --nt-content: 1200px; --nt-content-narrow: 840px; --nt-content-form: 560px;
  --nt-radius-sm: 9px; --nt-radius: 12px; --nt-radius-lg: 18px; --nt-radius-xl: 22px; --nt-radius-pill: 999px;
  --nt-shadow-card: 0 20px 50px -40px rgba(40, 32, 90, 0.35);
  --nt-shadow-pop: 0 18px 50px -12px rgba(20, 20, 40, 0.18);
  --nt-shadow-cta: 0 10px 28px -8px rgba(91, 69, 224, 0.55);

  /* /full-time-hiring v2 only (Claude Design export, 19 Oct): design-system values with no --nt- equivalent */
  --fth-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;   /* step numbers 01–04 */
  --fth-ease: cubic-bezier(.22, 1, .36, 1);
  --fth-hero-bg: radial-gradient(900px 420px at 50% -10%, #F1EEFE 0%, rgba(255,255,255,0) 62%), #FFFFFF;
}

/* ---- accessibility baseline ------------------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--nt-focus) !important;
  outline-offset: 2px !important;
}
.nt-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nt-skip { position: absolute; left: 8px; top: -60px; z-index: 3000; background: var(--nt-ink); color: #fff; padding: 12px 16px; border-radius: var(--nt-radius); font-weight: 700; text-decoration: none; }
.nt-skip:focus { top: 8px; }

/* Native <button> that must look like the anchor/div it replaced (inline styles supply the design). */
.nt-btn-reset { appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; text-align: inherit; line-height: inherit; letter-spacing: inherit; cursor: pointer; box-sizing: content-box; }
.nt-btn-reset:disabled, .nt-btn-reset[aria-disabled="true"] { cursor: not-allowed; }

/* ---- buttons ------------------------------------------------------------------------ */
.nt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: var(--nt-radius); border: 1px solid transparent; font: 700 var(--nt-text-md)/1 var(--nt-font-body); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; }
.nt-btn--primary { background: var(--nt-purple); color: #fff; box-shadow: var(--nt-shadow-cta); }
.nt-btn--primary:hover { background: var(--nt-purple-strong); }
.nt-btn--secondary { background: #fff; color: var(--nt-ink); border-color: var(--nt-line); }
.nt-btn--secondary:hover { border-color: var(--nt-line-strong); }
.nt-btn--ghost { background: transparent; color: var(--nt-purple-strong); }
.nt-btn:disabled, .nt-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.nt-btn[aria-busy="true"]::after, .nt-spinner { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: nt-spin .8s linear infinite; display: inline-block; }

/* ---- form fields ---------------------------------------------------------------------- */
.nt-field { display: block; margin: 0 0 var(--nt-space-4); }
.nt-label { display: block; font: 600 var(--nt-text-sm)/1.4 var(--nt-font-body); color: var(--nt-ink); margin-bottom: 7px; }
.nt-hint { font-size: var(--nt-text-xs); color: var(--nt-muted); margin-top: 5px; }
.nt-input, .nt-select, .nt-textarea { width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--nt-line-strong); border-radius: var(--nt-radius); font: 400 16px/1.4 var(--nt-font-body); color: var(--nt-ink); background: #fff; box-sizing: border-box; }
.nt-input[aria-invalid="true"], .nt-select[aria-invalid="true"], .nt-textarea[aria-invalid="true"] { border-color: var(--nt-error); }
.nt-error { font-size: var(--nt-text-xs); color: var(--nt-error); margin-top: 5px; font-weight: 600; }
.nt-alert { border-radius: var(--nt-radius); padding: 12px 14px; font-size: var(--nt-text-sm); line-height: 1.5; }
.nt-alert--error { background: var(--nt-error-bg); color: var(--nt-error); border: 1px solid #FDA29B; }
.nt-alert--success { background: var(--nt-success-bg); color: var(--nt-success); border: 1px solid #A6E2C6; }

@keyframes nt-spin { to { transform: rotate(360deg); } }

/* ---- motion: respect the visitor's preference everywhere --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  [data-marquee] { overflow-x: auto !important; }
  [data-marquee] > * { animation: none !important; transform: none !important; }
}

/* User-controlled pause: every CSS animation inside a paused page stops (decorative loops, marquees, halos). */
[data-motion="paused"] *, [data-motion="paused"] *::before, [data-motion="paused"] *::after { animation-play-state: paused !important; }

/* ---- surface-aware text colours (replace pale literals such as #8A8DA0 / #9A9DA8 / #1FA463) ---- */
:root, .nt-on-light { --nt-subtle: #5F6371; --nt-success-text: #0F7A4F; --nt-warn-text: #8A5200; --nt-accent-text: #4A36C7; }
.nt-on-dark { --nt-subtle: #B4B6C4; --nt-success-text: #5BDB9B; --nt-warn-text: #F5B544; --nt-accent-text: #B6A9FA; }

/* Mobile drawer: items keep their natural height (the drawer scrolls instead of squashing them) and meet the 44px target size. */
#mobile-nav-drawer > * { flex-shrink: 0; }
#mobile-nav-drawer a, #mobile-nav-drawer button { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }