/* ============================================================
   Talent2Role — Design tokens & primitives
   Quantum Task AI · shared by marketing site and platform
   ============================================================ */

:root{
  /* brand */
  --ink:#0A0F1F;
  --ink-2:#141B2F;
  --slate:#4A5568;
  --muted:#6B7794;
  --line:#E4E8F0;
  --line-2:#EEF1F7;
  --bg:#FFFFFF;
  --bg-soft:#F7F9FC;
  --bg-tint:#F1F5FC;

  --primary:#4338CA;
  --primary-600:#4F46E5;
  --primary-400:#7C74F0;
  --primary-50:#EEF0FE;

  --cyan:#0E9AAE;
  --cyan-50:#E6F7FA;
  --amber:#D97706;
  --amber-50:#FEF4E6;
  --green:#0F9D6E;
  --green-50:#E7F7F1;
  --red:#DC2B4B;
  --red-50:#FDEAEE;

  /* NICE category colours */
  --cat-OG:#4338CA;
  --cat-DD:#0E9AAE;
  --cat-IO:#0F9D6E;
  --cat-PD:#D97706;
  --cat-IN:#B4318F;

  --radius:14px;
  --radius-sm:9px;
  --radius-lg:22px;

  --shadow-xs:0 1px 2px rgba(10,15,31,.06);
  --shadow-sm:0 2px 8px rgba(10,15,31,.06), 0 1px 2px rgba(10,15,31,.04);
  --shadow:0 10px 30px rgba(10,15,31,.08), 0 2px 6px rgba(10,15,31,.04);
  --shadow-lg:0 28px 70px rgba(10,15,31,.14), 0 6px 18px rgba(10,15,31,.06);

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Space Grotesk','Inter',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{font-family:var(--display);margin:0;line-height:1.15;letter-spacing:-.022em;font-weight:700}
h1{font-size:clamp(2.3rem,5.2vw,3.85rem)}
h2{font-size:clamp(1.7rem,3.3vw,2.5rem)}
h3{font-size:1.22rem}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.center{text-align:center}
.muted{color:var(--muted)}
.hide{display:none !important}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:var(--radius-sm);border:1px solid transparent;
  font-weight:600;font-size:.94rem;cursor:pointer;white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  background:none;letter-spacing:-.01em;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 18px rgba(67,56,202,.26)}
.btn-primary:hover{background:var(--primary-600);box-shadow:0 10px 26px rgba(67,56,202,.34)}
.btn-ghost{border-color:var(--line);background:#fff;color:var(--ink);box-shadow:var(--shadow-xs)}
.btn-ghost:hover{border-color:#C9D0E0;background:var(--bg-soft)}
.btn-soft{background:var(--primary-50);color:var(--primary)}
.btn-soft:hover{background:#E3E7FD}
.btn-sm{padding:8px 15px;font-size:.85rem;border-radius:8px}
.btn-lg{padding:15px 30px;font-size:1.02rem;border-radius:11px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Google sign-in button (Google brand guidelines: white, Roboto-ish, 40px+) */
.btn-google{
  background:#fff;border:1px solid #DADCE0;color:#3C4043;font-weight:600;
  box-shadow:var(--shadow-xs);padding:13px 22px;border-radius:10px;
}
.btn-google:hover{background:#F8F9FA;border-color:#D2D5DA;box-shadow:var(--shadow-sm)}
.btn-google svg{width:19px;height:19px;flex:none}

/* ---------- surface primitives ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs)}
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  font-size:.74rem;font-weight:700;letter-spacing:.045em;text-transform:uppercase;
}
.pill-primary{background:var(--primary-50);color:var(--primary)}
.pill-cyan{background:var(--cyan-50);color:var(--cyan)}
.pill-amber{background:var(--amber-50);color:var(--amber)}
.pill-green{background:var(--green-50);color:var(--green)}
.pill-red{background:var(--red-50);color:var(--red)}
.pill-line{border:1px solid var(--line);color:var(--muted);background:#fff}

.eyebrow{
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);
}

/* ---------- brand lockup ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700}
.logo-mark{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:linear-gradient(140deg,var(--primary) 0%,var(--primary-400) 50%,var(--cyan) 100%);
  display:grid;place-items:center;color:#fff;font-size:.95rem;font-weight:700;
  box-shadow:0 4px 14px rgba(67,56,202,.3);
}
.logo-text{font-size:1.14rem;letter-spacing:-.03em}
.logo-text i{font-style:normal;color:var(--primary)}

/* ---------- utility ---------- */
.row{display:flex;align-items:center;gap:12px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.grid{display:grid;gap:20px}
.stack{display:flex;flex-direction:column}
.spacer{flex:1}

.bar{height:7px;border-radius:99px;background:var(--line-2);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:99px;background:var(--primary);transition:width .7s cubic-bezier(.2,.8,.2,1)}

::selection{background:var(--primary-50);color:var(--primary)}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#D5DAE6;border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#BCC3D4;background-clip:content-box;border:3px solid transparent}
*::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}