/* ============================================================
   Career app — design tokens, themes, base, motion
   Brand: deep trustworthy indigo + warm amber accent
   Single grotesk (Onest), Apple/Claude-like restraint
   ============================================================ */

:root {
  /* brand ramp (theme-independent) */
  --indigo-950: #0c1230;
  --indigo-900: #141d3a;
  --indigo-800: #1b2440;
  --indigo-700: #1e2a52;
  --indigo-600: #2a3a6e;
  --indigo-500: #3a4d8a;
  --indigo-400: #6173ad;
  --indigo-300: #9aa6cf;

  --amber:      #f5a524;
  --amber-soft: #fbcd6b;
  --amber-deep: #d4870c;
  --amber-glow: rgba(245,165,36,0.25);

  --good:  #2fbf8f;
  --warn:  #f5a524;
  --hot:   #ff6b4a;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-full: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ---------- LIGHT ---------- */
[data-theme="light"] {
  --bg:        #eef0f6;
  --bg-grad-a: #f3f4f9;
  --bg-grad-b: #e7e9f3;
  --surface:   #ffffff;
  --surface-2: #f5f6fb;
  --surface-3: #eceef6;
  --on-brand:  #ffffff;

  --text:   #16203f;
  --text-2: #5b6486;
  --text-3: #8b93b3;

  --brand:      #1e2a52;
  --brand-soft: #e9ecf7;
  --brand-tint: #f0f2fa;
  --on-brand-soft: #2a3a6e;

  --border:   rgba(20,29,58,0.09);
  --border-2: rgba(20,29,58,0.14);
  --shadow-1: 0 1px 2px rgba(20,29,58,.06), 0 2px 8px rgba(20,29,58,.05);
  --shadow-2: 0 6px 16px rgba(20,29,58,.08), 0 2px 6px rgba(20,29,58,.05);
  --shadow-3: 0 18px 40px rgba(20,29,58,.16);
  --statusbar-ink: #16203f;
  --scrim: rgba(16,22,46,0.42);
}

/* ---------- DARK ---------- */
[data-theme="dark"] {
  --bg:        #0b1026;
  --bg-grad-a: #0e1430;
  --bg-grad-b: #090d22;
  --surface:   #151c3c;
  --surface-2: #1b2348;
  --surface-3: #232c57;
  --on-brand:  #0e1430;

  --text:   #eef1fb;
  --text-2: #aab2d4;
  --text-3: #6f78a0;

  --brand:      #6173ad;
  --brand-soft: #1c2447;
  --brand-tint: #161d3d;
  --on-brand-soft: #c3ccec;

  --border:   rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.14);
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.3);
  --shadow-2: 0 8px 22px rgba(0,0,0,.4);
  --shadow-3: 0 22px 48px rgba(0,0,0,.55);
  --statusbar-ink: #eef1fb;
  --scrim: rgba(4,7,20,0.6);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font);
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(245,165,36,.06), transparent 60%),
    linear-gradient(160deg, #1a2348, #0a0f24 70%);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html, body { overflow-x: hidden; }
#root {
  min-height: 100vh;        /* fallback */
  min-height: 100dvh;       /* mobile: excludes browser toolbars */
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
@media (max-width: 480px) {
  html, body { overflow: hidden; }   /* lock page; phone fits fully */
  #root { padding: 10px; height: 100dvh; min-height: 0; }
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font-family: inherit; }

/* hide scrollbars inside the phone */
.noscroll::-webkit-scrollbar { width: 0; height: 0; }
.noscroll { scrollbar-width: none; }

/* ============================================================
   MOTION
   ============================================================ */
@keyframes fadeUp {
  from { transform: translateY(14px); }
  to   { transform: none; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  0%   { transform: scale(.86) translateY(8px); }
  100% { transform: none; }
}
@keyframes chipFly {
  0%   { transform: translateY(10px) scale(.92); }
  100% { transform: none; }
}
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes pulseRing {
  0%   { transform: scale(.5); opacity: .55; }
  80%  { opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes ringRotate { to { transform: rotate(360deg); } }
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes slideInRight { from { transform: translateX(26px); } to { transform: none; } }
@keyframes slideInLeft  { from { transform: translateX(-26px);} to { transform: none; } }
@keyframes scaleIn { from { transform: scale(.97);} to { transform: none; } }
@keyframes sheetUp { from { transform: translateY(100%);} to { transform: none; } }
@keyframes countFlash { 0%{ color: var(--amber);} 100%{ color: inherit;} }
@keyframes progressStripe { to { background-position: 32px 0; } }
@keyframes breathe { 0%,100% { transform: scale(.92); opacity: .45; } 50% { transform: scale(1.12); opacity: .9; } }
@keyframes auraFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(14px,-18px) scale(1.12); } }

.anim-fadeUp { animation: fadeUp .5s var(--ease-out) both; }
.anim-pop    { animation: popIn .4s var(--spring) both; }

/* shimmer placeholder */
.shimmer {
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}

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