/* ============================================================
   XAWSGroup shared design system
   Derived from the XAWSGroup/PassGen reference. All XAWSGroup
   internal tools should include this file to stay visually
   consistent. Do not fork these tokens per-tool.
   ============================================================ */

:root{
  --xaws-navy:        #1a3a5c;
  --xaws-navy-hover:  #1f4878;
  --xaws-navy-deep:   #123049;

  --xaws-bg:          #c8cfd4;
  --xaws-white:       #ffffff;

  --xaws-gray-100:    #f4f4f4;
  --xaws-gray-150:    #ececec;
  --xaws-gray-200:    #e0e0e0;
  --xaws-gray-300:    #d0d0d0;
  --xaws-mist:        #edf0f4;
  --xaws-border:      #c0c8d0;

  --xaws-text-dark:   #2d2d2d;
  --xaws-text-mid:    #444444;
  --xaws-text-muted:  #999999;
  --xaws-text-faint:  #666666;

  --xaws-success:     #2e9e6b;
  --xaws-warning:     #d4a017;
  --xaws-danger:      #e05252;
  --xaws-info:        #4a90c4;

  --xaws-radius-sm:   2px;
  --xaws-radius:      6px;
  --xaws-radius-lg:   10px;

  --xaws-shadow:      0 20px 60px rgba(0,0,0,0.18);
  --xaws-font:        'Raleway', sans-serif;
}

.xaws-body{
  margin:0;
  background:var(--xaws-bg);
  font-family:var(--xaws-font);
  color:var(--xaws-text-dark);
  min-height:100vh;
}

.xaws-shell{
  max-width:960px;
  margin:0 auto;
  padding:2.6rem 1.5rem 3rem;
}

/* Brand bar — every tool opens with this so the family reads as one product */
.xaws-brandbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.6rem;
  flex-wrap:wrap;
}
.xaws-brand{
  font-size:clamp(1.15rem, 3vw, 1.5rem);
  font-weight:300;
  letter-spacing:.1em;
  color:var(--xaws-navy-deep);
}
.xaws-brand b{ font-weight:700; }

.xaws-status-pill{
  font-size:.62rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-weight:700;
  padding:.4rem .85rem;
  border-radius:20px;
  background:var(--xaws-success);
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  white-space:nowrap;
}
.xaws-status-pill.warning{ background:var(--xaws-warning); }
.xaws-status-pill.danger{ background:var(--xaws-danger); }
.xaws-status-pill.neutral{ background:var(--xaws-navy); }

/* Card surface */
.xaws-card{
  background:var(--xaws-white);
  border-radius:var(--xaws-radius);
  box-shadow:var(--xaws-shadow);
  overflow:hidden;
  animation:xawsFadeUp .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes xawsFadeUp{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }

.xaws-card + .xaws-card{ margin-top:1.2rem; }

.xaws-card-header{
  padding:1.1rem 1.6rem;
  border-bottom:1px solid var(--xaws-gray-100);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
}
.xaws-card-title{
  font-size:.9rem;
  font-weight:700;
  color:var(--xaws-navy);
  letter-spacing:.03em;
  margin:0;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.xaws-card-body{ padding:1.8rem; }
.xaws-card-body.tight{ padding:0; }

/* Buttons */
.xaws-btn{
  font-family:var(--xaws-font);
  border:none;
  cursor:pointer;
  border-radius:var(--xaws-radius-sm);
  transition:background .2s, transform .1s, border-color .2s, color .2s;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}
.xaws-btn:active{ transform:scale(.99); }

.xaws-btn-primary{
  background:var(--xaws-navy);
  color:#fff;
  padding:.85rem 1.4rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-size:.78rem;
}
.xaws-btn-primary:hover{ background:var(--xaws-navy-hover); }

.xaws-btn-secondary{
  background:var(--xaws-gray-200);
  color:var(--xaws-navy);
  padding:.85rem 1.1rem;
}
.xaws-btn-secondary:hover{ background:var(--xaws-gray-300); }

.xaws-btn-outline{
  background:transparent;
  border:1.5px solid var(--xaws-border);
  color:var(--xaws-navy);
  padding:.8rem 1.1rem;
  letter-spacing:.05em;
  font-size:.78rem;
  text-transform:uppercase;
}
.xaws-btn-outline:hover{ background:var(--xaws-mist); }

.xaws-btn-danger-outline{
  background:transparent;
  border:1.5px solid var(--xaws-danger);
  color:var(--xaws-danger);
  padding:.55rem .9rem;
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-radius:20px;
}
.xaws-btn-danger-outline:hover{ background:var(--xaws-danger); color:#fff; }

.xaws-btn:disabled{ opacity:.5; cursor:default; }

/* Inputs */
.xaws-label{
  font-size:.68rem;
  color:var(--xaws-text-muted);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
  display:block;
  margin-bottom:.5rem;
}
.xaws-input, .xaws-select{
  width:100%;
  font-family:var(--xaws-font);
  background:var(--xaws-gray-100);
  border:1px solid transparent;
  border-radius:var(--xaws-radius-sm);
  padding:.7rem .9rem;
  font-size:.85rem;
  color:var(--xaws-text-dark);
  outline:none;
  transition:border-color .2s, background .2s;
}
.xaws-input:focus, .xaws-select:focus{ border-color:var(--xaws-navy); background:#fff; }
.xaws-input::placeholder{ color:var(--xaws-text-muted); }

input[type="range"].xaws-range{
  width:100%;
  appearance:none;
  height:3px;
  background:var(--xaws-gray-200);
  border-radius:2px;
  outline:none;
  cursor:pointer;
  accent-color:var(--xaws-navy);
}
input[type="range"].xaws-range::-webkit-slider-thumb{
  appearance:none;
  width:16px; height:16px;
  background:var(--xaws-navy);
  border-radius:50%;
  transition:transform .15s;
}
input[type="range"].xaws-range::-webkit-slider-thumb:hover{ transform:scale(1.2); }

/* Dropzone (Image Magic) */
.xaws-dropzone{
  border:2px dashed var(--xaws-border);
  border-radius:var(--xaws-radius);
  transition:all .25s ease;
  background:var(--xaws-gray-100);
}
.xaws-dropzone.dragover{
  border-color:var(--xaws-navy);
  background:var(--xaws-mist);
}

/* Toast */
.xaws-toast{
  position:fixed;
  bottom:2rem; left:50%;
  transform:translateX(-50%) translateY(50px);
  background:var(--xaws-success);
  color:#fff;
  font-family:var(--xaws-font);
  font-size:.72rem;
  letter-spacing:.1em;
  padding:.6rem 1.2rem;
  border-radius:3px;
  opacity:0;
  transition:transform .3s, opacity .3s;
  pointer-events:none;
  z-index:999;
}
.xaws-toast.show{ transform:translateX(-50%) translateY(0); opacity:1; }
.xaws-toast.error{ background:var(--xaws-danger); }
.xaws-toast.info{ background:var(--xaws-navy); }

/* Footer signature — same line on every tool */
.xaws-footer{
  text-align:center;
  margin-top:1.8rem;
  font-size:.7rem;
  color:var(--xaws-text-mid);
  letter-spacing:.04em;
  font-style:italic;
}

/* Pills / nav tabs (Scanner Pro) */
.xaws-tabs{ display:flex; gap:.4rem; flex-wrap:wrap; }
.xaws-tab{
  font-family:var(--xaws-font);
  border:none; background:transparent; cursor:pointer;
  padding:.6rem 1.2rem;
  border-radius:20px;
  font-size:.78rem; font-weight:700;
  color:var(--xaws-text-faint);
  letter-spacing:.04em;
  transition:background .2s, color .2s;
  display:inline-flex; align-items:center; gap:.4rem;
}
.xaws-tab.active{ background:var(--xaws-navy); color:#fff; }
.xaws-tab:not(.active):hover{ background:var(--xaws-mist); }

@media (max-width: 620px){
  .xaws-shell{ padding:1.6rem 1rem 2.2rem; }
  .xaws-card-body{ padding:1.2rem; }
}