/* ==========================================================================
   JubPost — shared design system
   Motif: the postmark. JubPost turns a hiring notice into something as
   official and trustworthy as a stamped, mailed document — so the visual
   language borrows from postal ephemera: postmark stamps, ticket stubs,
   perforated tear-lines, kraft-paper surfaces, typewriter data.
   ========================================================================== */

:root{
  --paper:   #FAFAF8;
  --paper-2: #F1EEE4;
  --paper-3: #E9E4D6;
  --line:    #D8D2C0;
  --ink:     #1B1F2A;
  --ink-2:   #4A4F5C;
  --postal:  #2F5D50;
  --postal-dark: #1F4038;
  --postal-tint: #E4EDE9;
  --stamp:   #AE4430;
  --stamp-tint: #F5E4DE;
  --gold:    #B4872E;
  --gold-tint: #F3E9D3;
}

html{ scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
}

.font-display{ font-family:'Space Grotesk', ui-sans-serif, sans-serif; }
.font-mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }

::selection{ background:var(--postal); color:var(--paper); }

/* Focus visibility, kept quiet but real */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, label:focus-visible{
  outline:2px solid var(--postal);
  outline-offset:2px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* --------------------------------------------------------------------------
   Postmark — the signature mark. Used as logo, verification badge,
   "job live" stamp, "application received" stamp, etc.
   -------------------------------------------------------------------------- */
.postmark{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  border:1.5px solid currentColor;
  color:var(--postal);
  transform:rotate(-7deg);
  flex:none;
}
.postmark::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:9999px;
  border:1px dashed currentColor;
  opacity:.55;
}
.postmark-lg{ width:76px; height:76px; }
.postmark-md{ width:52px; height:52px; }
.postmark-sm{ width:34px; height:34px; }

.postmark-stamp{
  border-color:var(--stamp);
  color:var(--stamp);
}
.postmark-gold{
  border-color:var(--gold);
  color:var(--gold);
}

/* Ticket / stub styling with punched perforation edge */
.ticket{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:14px;
  position:relative;
}
.perforated-y{
  position:relative;
}
.perforated-y::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:0;
  width:0;
  border-left:2px dashed var(--line);
}
.perf-dots{
  height:16px;
  background-image:radial-gradient(circle at 10px 8px, var(--paper) 5px, transparent 5.5px);
  background-size:20px 16px;
  background-repeat:repeat-x;
  margin:0 -1px;
}
.perf-dots-up{ transform:translateY(-8px); }
.perf-dots-down{ transform:translateY(8px); }

/* Envelope-flap top edge, used on the auth left panel */
.flap-edge{
  clip-path: polygon(0 0, 50% 6%, 100% 0, 100% 100%, 0 100%);
}

/* Subtle paper grain so flat colour fields don't feel too digital */
.grain{
  position:relative;
  isolation:isolate;
}
.grain::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* Cancellation-mark lines radiating from the postmark, used on hero */
.cancel-lines{
  background-image:repeating-linear-gradient(-18deg, currentColor 0 2px, transparent 2px 14px);
  opacity:.14;
}

/* Inputs */
.field{
  width:100%;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:.7rem .85rem;
  color:var(--ink);
  font-size:.95rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field::placeholder{ color:#9C9686; }
.field:focus{
  outline:none;
  border-color:var(--postal);
  box-shadow:0 0 0 3px var(--postal-tint);
}
.field-error{
  border-color:var(--stamp) !important;
  box-shadow:0 0 0 3px var(--stamp-tint) !important;
}

.label{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-2);
}

.btn-primary{
  background:var(--postal);
  color:var(--paper);
  border-radius:10px;
  font-weight:600;
  transition:background .15s ease, transform .1s ease;
}
.btn-primary:hover{ background:var(--postal-dark); }
.btn-primary:active{ transform:scale(.98); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; }

.btn-ghost{
  background:transparent;
  border:1.5px solid var(--line);
  color:var(--ink);
  border-radius:10px;
  font-weight:600;
  transition:border-color .15s ease, background .15s ease;
}
.btn-ghost:hover{ border-color:var(--postal); background:var(--postal-tint); }

.btn-chip{
  background:var(--paper);
  border:1.5px solid var(--postal);
  color:var(--postal);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  border-radius:8px;
  padding:.4rem .65rem;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.btn-chip:hover{ background:var(--postal); color:var(--paper); }
.btn-chip:disabled{ opacity:.45; cursor:not-allowed; background:transparent; color:var(--postal); }

.error-text{
  font-size:.8rem;
  color:var(--stamp);
  display:flex;
  align-items:flex-start;
  gap:.35rem;
}
.help-text{
  font-size:.8rem;
  color:var(--ink-2);
}

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
}

.tab-btn{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:.85rem;
  color:var(--ink-2);
  padding:.55rem 1rem;
  border-radius:9999px;
  transition:background .15s ease, color .15s ease;
}
.tab-btn.active{
  background:var(--ink);
  color:var(--paper);
}

.strength-bar{ height:4px; border-radius:2px; background:var(--line); overflow:hidden; }
.strength-fill{ height:100%; width:0%; transition:width .2s ease, background .2s ease; }

/* Toast */
#toast-root{ position:fixed; top:1rem; right:1rem; z-index:100; display:flex; flex-direction:column; gap:.5rem; }
.toast{
  background:var(--ink);
  color:var(--paper);
  border-radius:10px;
  padding:.75rem 1rem;
  font-size:.85rem;
  box-shadow:0 8px 24px rgba(27,31,42,.25);
  display:flex; align-items:center; gap:.55rem;
  animation:toast-in .25s ease;
  max-width:22rem;
}
.toast.stamp{ background:var(--stamp); }
.toast.postal{ background:var(--postal); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:translateY(0);} }

.skeleton{
  background:linear-gradient(90deg, var(--paper-2) 25%, var(--paper-3) 37%, var(--paper-2) 63%);
  background-size:400% 100%;
  animation:skeleton 1.4s ease infinite;
}
@keyframes skeleton{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

.dash-marquee{
  background-image:repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 20px);
  height:1px;
}