/* ==========================================================================
   Design Tokens — Prime BPO Job Application Form
   --------------------------------------------------------------------------
   Every value below is read from the Figma file:
     Prime-BPO-Job-Form  (Ruph3RHmfxdwyDOOSIEmnw)

   The design has no published Figma variables, so values come from the node
   data (get_design_context) and, where a node was a flattened raster, from
   sampling the frame render. Sampled values are marked.

   Design canvas is 1920×1584. Type and spacing scale down with clamp() from
   that reference width; the `-d` suffixed tokens keep the raw design px so the
   relationship to Figma stays auditable.
   ========================================================================== */

:root {
  /* ---------- Brand ------------------------------------------------------ */
  --c-navy-950:  #020e22;  /* stepper active badge, progress track base */
  --c-navy-900:  #041c43;  /* option cards, sidebar panels */
  --c-cyan:      #00aaff;  /* primary accent (Figma #0af) */
  --c-cyan-glow: rgba(7, 171, 217, 0.18); /* panel glow */
  --c-teal:      #12ada1;  /* mid stop of the icon gradient */
  --c-green:     #23b042;
  --c-green-neon:#1aff4c;  /* headline gradient start */
  --c-blue-deep: #0077d0;  /* "We're Hiring" gradient end */
  --c-red:       #f00001;  /* CTA */

  /* Radial gradient used on every circular icon badge. */
  --grad-icon: radial-gradient(
    circle at 50% 50%,
    #00aaff 0%,
    #09acd0 25%,
    #12ada1 50%,
    #1aaf71 75%,
    #23b042 100%
  );
  /* "Closers" / accent text gradient. */
  --grad-headline: linear-gradient(90deg, #1aff4c 0%, #00aaff 100%);
  /* "We're Hiring" magnifier. */
  --grad-hiring: linear-gradient(180deg, #23b042 0%, #0077d0 100%);
  /* Sidebar meta icons. */
  --grad-meta: linear-gradient(180deg, #00aaff 0%, #23b042 100%);

  /* ---------- Page background ------------------------------------------- */
  /* Sampled from the frame render: a dark navy mesh, lighter mid-left,
     near-black top-right and bottom-left. */
  --c-page-base: #05122a;
  --bg-page:
    radial-gradient(120% 90% at 8% 48%,  #163150 0%, rgba(22, 49, 80, 0) 58%),
    radial-gradient(90% 70%  at 92% 4%,  #000b1e 0%, rgba(0, 11, 30, 0) 60%),
    radial-gradient(90% 70%  at 4% 100%, #010c1f 0%, rgba(1, 12, 31, 0) 55%),
    linear-gradient(160deg, #08162e 0%, #05122a 45%, #030f22 100%);

  /* ---------- Form card ------------------------------------------------- */
  --c-card:        #dedede;  /* sampled; verified via progress-track blend */
  --c-q-title:     #323232;
  --c-q-sub:       #464646;
  --c-step-on:     #020e22;
  --c-step-off:    #474747;
  --c-step-label:  #363636;
  --c-track:       rgba(2, 13, 33, 0.16);

  /* ---------- Neutrals -------------------------------------------------- */
  --c-white:      #ffffff;
  --c-grey-200:   #e5e5e5;
  --c-grey-400:   #bdbdbd;  /* sidebar secondary text, perk labels */
  --c-grey-500:   #9a9a9a;
  --c-field-bd:   #b9b9b9;
  --c-field-bg:   #dedede;
  --border-panel: rgba(255, 255, 255, 0.14);

  /* ---------- Semantic -------------------------------------------------- */
  --c-error:      #d32f2f;
  --c-error-bg:   rgba(211, 47, 47, 0.10);
  --c-success:    #1e8e4a;
  --c-success-bg: rgba(30, 142, 74, 0.10);

  /* ---------- Typography ------------------------------------------------ */
  /* The design specifies Sequel Sans VF D1 — a commercial face that cannot be
     bundled. Manrope is the closest freely-available match for its geometric,
     slightly-condensed grotesque proportions; swap the stack here when the
     licensed webfont is available. */
  --font-sans: "Manrope", "Sequel Sans VF D1", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
               sans-serif;

  --fw-book:     400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;

  /* Sidebar scale.
     --------------------------------------------------------------------
     Reduced from the Figma values at the client's request (2026-07-30) so
     the whole job panel — brand, role, salary, perks and meta — is visible
     alongside the form without scrolling. The design px each token was
     derived from is kept in the comment for traceability. */
  --fs-brand:      clamp(1.0625rem, 0.85rem + 0.75vw, 1.375rem); /* was 35.847 */
  --fs-tagline:    clamp(0.625rem,  0.57rem + 0.26vw, 0.8125rem);/* was 21.364 */
  --fs-hiring:     clamp(0.875rem,  0.79rem + 0.43vw, 1.125rem); /* was 32.295 */
  --fs-headline:   clamp(1.5rem,    1.18rem + 1.15vw, 2rem);     /* was 51.672 */
  --fs-body:       clamp(0.8125rem, 0.78rem + 0.31vw, 0.9375rem);/* was 24 */
  --fs-salary:     clamp(1.375rem,  1.11rem + 1.04vw, 1.875rem); /* was 51.672 */
  --fs-meta-label: clamp(0.6875rem, 0.65rem + 0.21vw, 0.78rem);  /* was 22 */
  --fs-meta-value: clamp(0.8125rem, 0.78rem + 0.31vw, 0.9375rem);/* was 26 */
  --fs-perks-head: clamp(0.9375rem, 0.83rem + 0.52vw, 1.1875rem);/* was 36 */
  --fs-perk:       clamp(0.75rem,   0.71rem + 0.26vw, 0.8125rem);/* was 22 */
  --fs-question:   clamp(1.125rem, 0.94rem + 1.67vw, 2rem);     /* 32 */
  --fs-question-s: clamp(0.8125rem, 0.72rem + 1.15vw, 1.375rem);/* 22 */
  --fs-option:     clamp(0.9375rem, 0.83rem + 1.46vw, 1.75rem); /* 28 */
  --fs-option-sm:  clamp(0.875rem, 0.80rem + 1.04vw, 1.375rem); /* 22 — long labels */
  --fs-step-num:   clamp(0.75rem,  0.70rem + 0.89vw, 1.063rem); /* 17.007 */
  --fs-step-label: clamp(0.688rem, 0.64rem + 0.83vw, 0.994rem); /* 15.903 */
  --fs-cta:        clamp(0.875rem, 0.80rem + 1.04vw, 1.25rem);  /* 20 */
  --fs-field:      clamp(0.875rem, 0.81rem + 0.94vw, 1.25rem);  /* 20 */
  --fs-field-lbl:  clamp(0.875rem, 0.81rem + 0.94vw, 1.25rem);  /* 20 */
  --fs-hint:       clamp(0.75rem,  0.71rem + 0.63vw, 1rem);     /* 16 */

  --lh-tight:   1.1;
  --lh-heading: 1.2;
  --lh-body:    1.45;
  --lh-relaxed: 1.6;

  --ls-option:  0.04em;  /* 1.12px on 28px */
  --ls-salary:  0.04em;  /* 2.0669px on 51.672px */

  /* ---------- Layout (design px at 1920) -------------------------------- */
  --shell-max:     1760px;  /* 425 sidebar + 20 gap + 1315 card */
  --sidebar-w:     360px;   /* narrowed with the reduced sidebar scale */
  --card-w:        1315px;
  --shell-gap:     clamp(1.5rem, 1rem + 1.04vw, 1.25rem);
  --page-pad-x:    clamp(1rem, 0.5rem + 2.5vw, 5rem);   /* 80 */
  --page-pad-y:    clamp(1.5rem, 1rem + 1.5vw, 2.5rem);

  --card-pad-x:    clamp(1.25rem, 0.8rem + 2.7vw, 3.25rem);
  --card-pad-y:    clamp(1.5rem, 1rem + 2.4vw, 3.4rem);
  --panel-pad:     clamp(0.875rem, 0.79rem + 0.42vw, 1.125rem); /* was 36.17 */

  --option-h:      clamp(4rem, 3.4rem + 1.9vw, 7.75rem);  /* 124 */
  --option-gap:    clamp(0.625rem, 0.5rem + 0.6vw, 1.188rem); /* 19 */
  --icon-badge:    clamp(2.5rem, 2rem + 1.9vw, 4.524rem); /* 72.379 */
  --icon-glyph:    clamp(1.5rem, 1.2rem + 1.1vw, 2.688rem); /* 43 */
  --meta-badge:    clamp(1.75rem, 1.6rem + 0.52vw, 2.125rem); /* was 51.672 */
  --step-badge:    clamp(2rem, 1.8rem + 0.75vw, 2.771rem); /* 44.342 */
  --track-h:       clamp(0.5rem, 0.45rem + 0.35vw, 1.063rem); /* 17 */

  /* ---------- Radii ----------------------------------------------------- */
  --r-panel:  0.807rem;  /* 12.918 */
  --r-cta:    0.483rem;  /* 7.731 */
  --r-field:  0.5rem;
  --r-pill:   999px;

  /* ---------- Elevation -------------------------------------------------- */
  --shadow-panel: 0 0 0.5rem var(--c-cyan-glow);      /*  7.977px */
  --shadow-panel-lg: 0 0 1rem var(--c-cyan-glow);     /* 15.954px */
  --shadow-card:  0 1.5rem 3.5rem rgba(0, 0, 0, 0.35);
  --shadow-focus: 0 0 0 3px rgba(0, 170, 255, 0.45);

  /* ---------- Motion ----------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;

  /* ---------- Z-index ---------------------------------------------------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}