/* =============================================================================
   FoneFluent Careers — Design tokens
   Brand yellow (#FCBF05) + near-black ink, condensed display + Inter body.

   Variable names below kept for backwards-compat; the historical "brand-orange"
   tokens now hold the gold/yellow palette. Use --on-accent for foreground text
   on yellow surfaces (yellow on white fails contrast for small text).
   ========================================================================== */

:root {
  /* --- Colors: brand (yellow / gold) --- */
  --brand-orange:       #FCBF05;   /* primary fill / dark-bg accent */
  --brand-orange-600:   #DAA904;   /* hover */
  --brand-orange-700:   #A37C03;   /* AA-contrast text-on-white */
  --brand-orange-50:    #FFF8DB;   /* tint background */
  --on-accent:          #191919;   /* text/icons placed on top of --brand-orange */

  /* --- Colors: ink (neutral near-black palette) --- */
  --ink:                #191919;
  --ink-700:            #272727;
  --ink-600:            #3D3D3D;
  --ink-soft:           #525252;
  --muted:              #737373;
  --muted-soft:         #A3A3A3;

  /* --- Colors: surfaces (neutral grays to harmonize with yellow) --- */
  --surface:            #FFFFFF;
  --surface-2:          #F5F5F5;
  --surface-3:          #EFEFEF;
  --surface-4:          #E5E5E5;
  --border:             #E5E5E5;
  --border-strong:      #D4D4D4;

  /* --- Colors: states --- */
  --success:            #16A34A;
  --success-bg:         #DCFCE7;
  --warning:            #D97706;
  --warning-bg:         #FEF3C7;
  --danger:             #DC2626;
  --danger-bg:          #FEE2E2;
  --info:               #0284C7;
  --info-bg:            #E0F2FE;

  /* --- Type (Poppins everywhere; weight + size carry the display vs body distinction) --- */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.0625rem; /* 17px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  2rem;      /* 32px */
  --text-4xl:  2.75rem;   /* 44px */
  --text-5xl:  3.75rem;   /* 60px */
  --text-6xl:  5rem;      /* 80px */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-relaxed:1.7;

  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;

  /* --- Radius (flat aesthetic — sharp corners on tabs/forms/buttons/cards) --- */
  --radius-xs: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
  --radius-full: 9999px;     /* still used for circular avatars, dots, capsule pills */

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(25, 25, 25, .06);
  --shadow-sm: 0 1px 3px rgba(25, 25, 25, .08), 0 1px 2px rgba(25, 25, 25, .04);
  --shadow-md: 0 6px 16px rgba(25, 25, 25, .08), 0 2px 4px rgba(25, 25, 25, .04);
  --shadow-lg: 0 12px 32px rgba(25, 25, 25, .10), 0 4px 8px rgba(25, 25, 25, .04);

  /* --- Spacing (4px grid) --- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* --- Layout --- */
  --container-max: 1180px;
  --container-px:  clamp(1rem, 4vw, 2.5rem);

  /* --- Motion --- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snappy: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-sharp:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur:         200ms;
  --dur-slow:    400ms;
  --dur-reveal:  600ms;

  /* --- Z layers --- */
  --z-nav:    50;
  --z-modal:  100;
  --z-toast:  150;
}

/* ---- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink);
  background: var(--surface);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
::selection { background: var(--brand-orange); color: var(--on-accent); }

/* ============================================================================
   Motion library — keyframes + reveal utilities
   Honors prefers-reduced-motion at the bottom.
   ========================================================================== */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fade-up-lg {
  from { opacity: 0; transform: translate3d(0, 32px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fade-down {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fade-right {
  from { opacity: 0; transform: translate3d(-12px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(252, 191, 5, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(252, 191, 5, 0); }
  100% { box-shadow: 0 0 0 0 rgba(252, 191, 5, 0); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

/* Reveal-on-scroll utility — JS adds .is-visible when the element scrolls in. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Spinner used by submit buttons in their loading state */
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -2px;
}

/* Honor user preference — kill all motion uniformly */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}