/* ============================================================================
   Cardfy — design system
   Tokens + shared primitives. Surface-specific CSS lives in app.css / card.css.
   Values transcribed 1:1 from the design prototypes.
   ========================================================================== */

:root{
  --paper:#FAFAF7;
  --ink:#0F100E;
  --ink2:#2A2925;
  --mute:#6B6A64;
  --mute-soft:#5B5A55;
  --faint:#9A988F;
  --line:#E7E4DB;
  --line-soft:#E6E3DB;
  --line2:#EFEDE5;
  --card:#FFFFFF;
  --sand:#EFEADB;
  --brand:#0F4F33;
  --brand-hover:#0C3D28;
  --brand-soft:#E2EBE5;
  --app-bg:#F6F4EE;
  --whatsapp:#1F8A4C;
  --gold:#A67B3F;

  --ok-bg:#E6F3EC;  --ok-ink:#0F5C3A;  --ok-dot:#1F8A4C;
  --warn-bg:#FBF2DC; --warn-ink:#7A4A12; --warn-dot:#C9933A;
  --err:#8A2F22;    --err-bg:#FBECEA;  --err-line:#EAC9C2; --err-dot:#C84A36;
  --info-bg:#EFEDFC; --info-ink:#3F3A8A;

  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px;
  --shadow-pop:0 30px 60px -24px rgba(0,0,0,0.35);
  --font-sans:'Geist','Geist Variable',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
  --font-serif:'Instrument Serif',Georgia,serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}
img{max-width:100%;display:block}
.serif{font-family:var(--font-serif);font-style:italic;letter-spacing:-0.02em}
.mono{font-family:var(--font-mono)}
.muted{color:var(--mute)} .faint{color:var(--faint)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---- Buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border:none;border-radius:var(--r);font-size:14px;font-weight:600;
  letter-spacing:-0.005em;transition:transform .12s ease,background .15s ease;text-align:center}
.btn:active{transform:scale(.985)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000}
.btn-brand{background:var(--brand);color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 12px 28px -10px rgba(15,79,51,.55)}
.btn-brand:hover{background:var(--brand-hover)}
.btn-wa{background:var(--whatsapp);color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 24px -10px rgba(31,138,76,.5)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--sand)}
.btn-paper{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn-danger{background:transparent;color:var(--err);border:1px solid var(--line)}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:9px}
.btn[disabled],.btn:disabled{background:var(--line);color:var(--faint);cursor:not-allowed;box-shadow:none}
.btn.busy{opacity:.7;pointer-events:none}

/* ---- Pills / chips ------------------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:0.02em;white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:3px;flex:0 0 auto}
.pill-ok{background:var(--ok-bg);color:var(--ok-ink)} .pill-ok .dot{background:var(--ok-dot)}
.pill-warn{background:var(--warn-bg);color:var(--warn-ink)} .pill-warn .dot{background:var(--warn-dot)}
.pill-miss{background:var(--err-bg);color:var(--err)} .pill-miss .dot{background:var(--err-dot)}
.pill-na{background:var(--sand);color:var(--mute)} .pill-na .dot{background:var(--faint)}
.pill-info{background:var(--info-bg);color:var(--info-ink)} .pill-info .dot{background:#5550C2}

/* ---- Form fields --------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field > .label,.fld-label{font-size:11.5px;color:var(--mute);font-weight:600;
  letter-spacing:0.04em;text-transform:uppercase}
.input,.textarea,select.input{padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  font-size:14px;background:var(--card);color:var(--ink);outline:none;width:100%;
  transition:border-color .12s ease,box-shadow .12s ease}
.input:focus,.textarea:focus,select.input:focus{border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.textarea{resize:vertical;line-height:1.5}
.input.is-error,.textarea.is-error{border:1.5px solid var(--err);box-shadow:0 0 0 3px var(--err-bg)}
.field-hint{font-size:11.5px;color:var(--faint)}
.field-error{font-size:12px;color:var(--err);font-weight:500;display:flex;align-items:center;gap:6px}

/* ---- Toggle -------------------------------------------------------------- */
.toggle{width:34px;height:20px;border-radius:99px;background:#D7D3C8;position:relative;
  display:inline-block;flex-shrink:0;transition:background .15s;border:none;padding:0}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:99px;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.toggle.on{background:var(--brand)} .toggle.on::after{left:16px}

/* ---- Error banner / inline ---------------------------------------------- */
.banner-error{padding:12px 14px;background:var(--err-bg);border:1px solid var(--err-line);
  border-radius:10px;display:flex;gap:10px;align-items:flex-start}
.banner-error .x{width:18px;height:18px;border-radius:9px;background:var(--err);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px}
.banner-error b{font-size:13px;font-weight:600;color:var(--err);display:block}
.banner-error span{font-size:12px;color:#A65A4A}
.flash{padding:11px 14px;border-radius:10px;font-size:13px;font-weight:500;margin-bottom:14px}
.flash-ok{background:var(--ok-bg);color:var(--ok-ink)}
.flash-err{background:var(--err-bg);color:var(--err)}

/* ---- Skeleton shimmer (Design Review §03) ------------------------------- */
@keyframes cardly-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton{background:linear-gradient(90deg,#E9E5D9 0%,#F4F1E8 50%,#E9E5D9 100%);
  background-size:200% 100%;animation:cardly-shimmer 1.6s linear infinite;border-radius:6px}
.skeleton.light{background:linear-gradient(90deg,#F4F1E8 0%,#FAF8F1 50%,#F4F1E8 100%);
  background-size:200% 100%}

/* ---- Toast (Design Review Sprint 4) ------------------------------------- */
#toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;
  display:flex;flex-direction:column;gap:8px;width:max-content;max-width:92vw}
.toast{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;
  background:var(--ink);color:var(--paper);font-size:13.5px;font-weight:500;
  box-shadow:var(--shadow-pop);animation:toast-in .2s ease}
.toast.err{background:var(--err)} .toast.ok{background:var(--brand)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- QR block (deterministic placeholder identical to the prototype) ---- */
.qr{display:block;shape-rendering:crispedges}

/* ---- Modal scrim --------------------------------------------------------- */
.scrim{position:fixed;inset:0;background:rgba(15,16,14,.4);backdrop-filter:blur(2px);
  z-index:60;display:grid;place-items:center;padding:24px}
.modal{width:560px;max-width:100%;background:var(--card);border-radius:var(--r-xl);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.4);color:var(--ink);overflow:hidden}
.modal-head{padding:22px 24px 14px;border-bottom:1px solid var(--line2);
  display:flex;justify-content:space-between;align-items:flex-start}
.modal-body{padding:22px 24px;display:flex;flex-direction:column;gap:16px}
.modal-foot{padding:14px 24px;border-top:1px solid var(--line2);background:#FCFBF6;
  display:flex;justify-content:space-between;align-items:center;gap:8px}
.eyebrow{font-size:11px;color:var(--mute);font-weight:600;letter-spacing:0.08em;text-transform:uppercase}

/* ---- Container ----------------------------------------------------------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}

@media (max-width:640px){
  .wrap{padding:0 20px}
}